Vue 学习笔记（三）
2022/3/20 23:29:44
本文主要是介绍Vue 学习笔记（三），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
Vue 学习笔记（三）
文章目录
- Vue 学习笔记（三）
- 一、Vue 脚手架
- 1. 脚手架安装
- 2. 分析脚手架结构
- 3. render 函数
- 4. 修改默认配置
- 5. ref 属性
- 6. props 配置项
- 7. mixin(混入)
- 8. 插件
- 9. scoped样式
- 二、TodoList案例
- 1. webStorage
- 2. 组件的自定义事件
- 3. 全局事件总线（GlobalEventBus）
- 4. 消息订阅与发布（pubsub）
- 5. nextTick
一、Vue 脚手架
Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）
官方文档
1. 脚手架安装
- 全局安装 @Vue/cli
npm install -g @vue/cli
- 如果出现下载缓慢，可以先配置 npm 淘宝镜像：
npm config set registry https://registry.npm.taobao.org
- 切换到你要创建项目的目录，然后用命令创建项目：vue create xxx
- 启动项目
npm run server
启动后：
访问效果：
2. 分析脚手架结构
目录结构：
. |-- App.vue |-- assets # 经常放静态资源，比如logo 图 | `-- logo.png |-- components # 放组件，除了App.Vue ，因为他是最有组件的最终管理者 | |-- School.vue | `-- Student.vue `-- main.js
组件：
School.vue
<template>
<div class="demo">
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
<button @click="showName">点我提示学校名</button>
</div>
</template>
<script>
export default {
name:'School',
data(){
return {
name:'尚硅谷',
address:'北京昌平'
}
},
methods: {
showName(){
alert(this.name)
}
},
}
</script>
<style>
.demo{
background-color: orange;
}
</style>
Student.vue
<template>
<div>
<h2>学生姓名：{{name}}</h2>
<h2>学生年龄：{{age}}</h2>
</div>
</template>
<script>
export default {
name:'Student',
data(){
return {
name:'张三',
age:18
}
}
}
</script>
App.vue
<template>
<div>
<img src="./assets/logo.png" alt="logo">
<School></School>
<Student></Student>
</div>
</template>
<script>
//引入组件
import School from './components/School'
import Student from './components/Student'
export default {
name:'App',
components:{
School,
Student
}
}
</script>
main.js
/*
该文件是整个项目的入口文件
*/
//引入Vue
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'
//关闭vue的生产提示
Vue.config.productionTip = false
/*
关于不同版本的Vue：
1.vue.js与vue.runtime.xxx.js的区别：
(1).vue.js是完整版的Vue，包含：核心功能+模板解析器。
(2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用
render函数接收到的createElement函数去指定具体内容。
*/
//创建Vue实例对象---vm
new Vue({
el:'#app',
//render函数完成了这个功能：将App组件放入容器中
render: h => h(App),
// render:q=> q('h1','你好啊')
// template:`<h1>你好啊</h1>`,
// components:{App},
})
html 静态资源：
3. render 函数
在 min.js 中我们引入了Vue：
其实这里的Vue 其实是vue.runtime.esm.js。他是残缺版的Vue（少了模板解析器）。所以我们在 min.js 中引入模板是无法解析的。.
如何解决的？这里就要引入 render。（当引入组件时，则只需传一个参数，组件名称）
测试效果，发现可以解析了：
为什么要用这些精简版的Vue呢？
因为模板解析器就占了整个Vue 约 1/3 。在Vue 打包的时候，就不需要在打包 模板解析器了，节省了空间。而且，模板解析器本就不应该出现在打包文件中。
4. 修改默认配置
官方文档地址
创建 vue.config.js 文件。在改文件中配置我们需要修改的配置
module.exports = {
pages: {
index: {
// page 的入口
entry: 'src/index/main.js',
// 模板来源
template: 'public/index.html',
// 在 dist/index.html 的输出
filename: 'index.html',
// 当使用 title 选项时，
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: 'Index Page',
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
// 当使用只有入口的字符串格式时，
// 模板会被推导为 `public/subpage.html`
// 并且如果找不到的话，就回退到 `public/index.html`。
// 输出文件名会被推导为 `subpage.html`。
subpage: 'src/subpage/main.js'
}
}
这里就不一一展示，具体可以查看下文档。
5. ref 属性
- 被用来给元素或子组件注册引用信息（id的替代者）
- 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
- 使用方式：
1: 打标识：<h1 ref="xxx">.....</h1> 或 <School ref="xxx"></School> 2: 获取：this.$refs.xxx
<template>
<div>
<h1 v-text="msg" ref="title"></h1>
<button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
<School ref="sch"/>
</div>
</template>
<script>
//引入School组件
import School from './components/School'
export default {
name:'App',
components:{School},
data() {
return {
msg:'欢迎学习Vue！'
}
},
methods: {
showDOM(){
console.log(this.$refs.title) //真实DOM元素
console.log(this.$refs.btn) //真实DOM元素
console.log(this.$refs.sch) //School组件的实例对象（vc）
}
},
}
</script>
控制台输出结果：
6. props 配置项
功能： 让组件接收外部传过来的数据
传递数据： <Demo name="xxx"/>
接收数据：
- 第一种方式（只接收）：props:[‘name’]
- 第二种方式（限制类型）：props:{name:String}
- 第三种方式（限制类型、限制必要性、指定默认值）
props:{
name:{
type:String, //类型
required:true, //必要性
default:'老王' //默认值
}
}
注意：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。props中接收的数据会被绑定到组件实例对象vc上，且优先级高于data中的数据，data中的数据属性名字不能与接收的props属性名一致
App.vue:
<template>
<div>
<Student name="李四" sex="女" :age="18" />
<!-- 在组件标签中声明传入属性
:即v-bind 将字符串18变为js表达式（数字18），使其可以接受加法运算
另外，属性名不能为一些常用属性，比如：key,ref等
-->
</div>
</template>
<script>
import Student from "./components/Student";
export default {
name: "App",
components: { Student },
};
</script>
Student.vue
<template>
<div>
<h1>{{ msg }}</h1>
<h2>学生姓名：{{ name }}</h2>
<h2>学生性别：{{ sex }}</h2>
<h2>学生年龄：{{ myAge + 1 }}</h2>
<button @click="updateAge">尝试修改收到的年龄</button>
</div>
</template>
<script>
export default {
name: "Student",
data() {
console.log(this);
return {
msg: "我是一个尚硅谷的学生",
myAge: this.age,
// props的数据不允许修改，想要改动得到propo的数据放入data中
// props的优先级高，data中的this.age是props中接收的数据
};
},
methods: {
updateAge() {
this.myAge++;
},
},
//方法一:简单声明接收，放在组件实例对象vc上
// props:['name','age','sex']
//方法二:接收的同时对数据进行类型限制，类型如果不符合报错
/* props:{
name:String,
age:Number,
sex:String
} */
//方法三：接收的同时对数据：进行类型限制+默认值的指定+必要性的限制
props: {
name: {
type: String, //name的类型是字符串
required: true, //name是必要的，有此属性一般不需要加默认值
},
age: {
type: Number,
default: 99, //默认值，即如果不传此属性则使用默认值
},
sex: {
type: String,
required: true,
},
},
};
</script>
程序运行截图：页面中学生年龄点击增加，控制台中data中的属性myAge改变，props中age属性不变
7. mixin(混入)
功能： 可以把多个组件共用的配置提取成一个混入对象
使用方式：
- 第一步定义混合：
{
data(){....},
methods:{....}
....
}
- 使用混入
- 使用前需要import导入 - 全局混入：Vue.mixin(xxx)放在main.js文件中,所有vm,vc都能得到混入的属性 - 局部混入：mixins:['xxx']放在需要的文件中,在此文件中得到混入的属性（原属性+混入属性） - 替换型策略有`props`、`methods`、`inject`、`computed`，就是将新的同名参数替代旧的参数 - 合并型策略是`data`, 通过`set`方法进行合并和重新赋值， 如果混入与自身（vc）有同名属性,自身属性优先级高,会覆盖掉混入属性 - 队列型策略有生命周期函数和`watch`，原理是将函数存入一个数组，然后正序遍历依次执行，自身（vc）的钩子在混合之后运行 - 叠加型有`component`、`directives`、`filters`，通过原型链进行层层的叠加 - 如果前后两个混合有同名属性，以后面的为主，
School.vue
<template>
<div>
<h2 @click="showName">学校名称：{{ name }}</h2>
<h2>学校地址：{{ address }}</h2>
</div>
</template>
<script>
//引入一个hunhe
// import {hunhe,hunhe2} from '../mixin'
export default {
name: "School",
data() {
return {
name: "尚硅谷",
address: "北京",
x: 666,
// 如果混入与自身有同名属性。自身属性优先级高
};
},
// mixins:[hunhe,hunhe2],
};
</script>
Student.vue
<template>
<div>
<h2 @click="showName">学生姓名：{{ name }}</h2>
<h2>学生性别：{{ sex }}</h2>
</div>
</template>
<script>
//局部混合：
// import {hunhe,hunhe2} from '../mixin'
export default {
name: "Student",
data() {
return {
name: "张三",
sex: "男",
};
},
// mixins:[hunhe,hunhe2]
};
</script>
App.vue
<template>
<div>
<School/>
<hr>
<Student/>
</div>
</template>
<script>
import School from './components/School'
import Student from './components/Student'
export default {
name:'App',
components:{School,Student}
}
</script>
main.js
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false
// 全局混合，给所有的vm和vc得到混合
import { hunhe, hunhe2 } from './mixin'
Vue.mixin(hunhe)
Vue.mixin(hunhe2)
//创建vm
new Vue({
el: '#app',
render: h => h(App)
})
mixin.js
export const hunhe = {
methods: {
showName(){
alert(this.name)
}
},
mounted() {
console.log('你好啊！')
},
}
export const hunhe2 = {
data() {
return {
x:100,
y:200
}
},
}
8. 插件
功能： 用于增强Vue
本质： 包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
定义插件：
对象.install = function (Vue, options) {
// 1. 添加全局过滤器
Vue.filter(....)
// 2. 添加全局指令
Vue.directive(....)
// 3. 配置全局混入(合)
Vue.mixin(....)
// 4. 添加实例方法
Vue.prototype.$myMethod = function () {...}
Vue.prototype.$myProperty = xxxx
}
使用插件： Vue.use()
plugins.js
export default {
install(Vue, x, y, z) {
// 接收参数
console.log(x, y, z)
//全局过滤器，从第一位开始，找到前四个
Vue.filter('mySlice', function (value) {
return value.slice(0, 4)
})
//定义全局指令,自动获取焦点
Vue.directive('fbind', {
//指令与元素成功绑定时（一上来）
bind(element, binding) {
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element, binding) {
element.focus()
},
//指令所在的模板被重新解析时
update(element, binding) {
element.value = binding.value
}
})
//定义混入
Vue.mixin({
data() {
return {
x: 100,
y: 200
}
},
})
//给Vue原型上添加一个方法（vm和vc就都能用了）
Vue.prototype.hello = () => { alert('你好啊') }
}
}
main.js
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false
//引入插件
import plugins from './plugins'
//应用（使用）插件
Vue.use(plugins, 1, 2, 3)
// 传入参数
//创建vm
new Vue({
el: '#app',
render: h => h(App)
})
School.vue
<template>
<div>
<h2>学校名称：{{name | mySlice}}</h2>
<h2>学校地址：{{address}}</h2>
<button @click="test">点我测试一个hello方法</button>
</div>
</template>
<script>
export default {
name:'School',
data() {
return {
name:'尚硅谷atguigu',
address:'北京',
}
},
methods: {
test(){
this.hello()
}
},
}
</script>
Student.vue
<template>
<div>
<h2>学生姓名：{{name}}</h2>
<h2>学生性别：{{sex}}</h2>
<input type="text" v-fbind:value="name">
</div>
</template>
<script>
export default {
name:'Student',
data() {
return {
name:'张三',
sex:'男'
}
},
}
</script>
App.vue
<template>
<div>
<School/>
<hr>
<Student/>
</div>
</template>
<script>
import School from './components/School'
import Student from './components/Student'
export default {
name:'App',
components:{School,Student}
}
</script>
9. scoped样式
如果不同组件起了相同的样式名，会造成样式冲突，在App.vue中后import导入的组件样式会覆盖前面一个组件的同名样式，所以用scoped解决。最好不要再App.vue的style中加入scoped，因为他是汇总组件，写在其中的样式为公共样式。
作用： 让样式在局部生效，防止冲突。
写法：
<style lang="less" scoped>
//lang =''规定了用什么来写style，不写默认为css
.demo{
background-color: pink;
}
</style>
二、TodoList案例
代码
实现效果：
组件化编码流程：
- 拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。
- 实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：一个组件在用：放在组件自身即可。一些组件在用：放在他们共同的父组件上（状态提升）。
- .实现交互：从绑定事件开始。
props适用于：
- 父组件 ==> 子组件 通信
- 子组件 ==> 父组件 通信（要求父先给子一个函数，然后子调用这个函数去传递数据给父组件）
1. 在父组件定义函数
methods: {
addTodo(todoObj) {
this.todos.unshift(todoObj);
},
},
2.将父组件函数传递给子组件
<MyHeader :addTodo="addTodo"></MyHeader>
3.子组件接收父组件传递的函数
props: ["addTodo"],
4.调用这个函数，通知App组件去添加一个todo对象
this.addTodo(todoObj);
使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！
props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。
1. webStorage
- 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）
- 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
相关API：
1. ```xxxxxStorage.setItem('key', 'value');```
该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
值为字符串，如果存入的值为对象，则将其转换为字符串后存入
2. ```xxxxxStorage.getItem('person');```
该方法接受一个键名作为参数，返回键名对应的值。对象转字符串后存入，取出后需将其重新转化为对象
3. ```xxxxxStorage.removeItem('key');```
该方法接受一个键名作为参数，并把该键名从存储中删除。
4. ```xxxxxStorage.clear()```
该方法会清空存储中的所有数据。
备注：
- SessionStorage存储的内容会随着浏览器窗口关闭而消失。
- LocalStorage存储的内容，需要手动清除才会消失。
xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。JSON.parse(null)的结果依然是null。- 这两者的API用法一致
localStorage.html文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>localStorage</title>
</head>
<body>
<h2>localStorage</h2>
<button onclick="saveData()">点我保存一个数据</button>
<button onclick="readData()">点我读取一个数据</button>
<button onclick="deleteData()">点我删除一个数据</button>
<button onclick="deleteAllData()">点我清空一个数据</button>
<script type="text/javascript">
let p = { name: '张三', age: 18 }
function saveData() {
localStorage.setItem('msg', 'hello!!!')
localStorage.setItem('msg2', 666)
localStorage.setItem('person', JSON.stringify(p))
}
function readData() {
console.log(localStorage.getItem('msg'))
console.log(localStorage.getItem('msg2'))
const result = localStorage.getItem('person')
JSON.parse(result)
// console.log(localStorage.getItem('msg3'))
}
function deleteData() {
localStorage.removeItem('msg2')
}
function deleteAllData() {
localStorage.clear()
}
</script>
</body>
</html>
sessionStorage.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>sessionStorage</title>
</head>
<body>
<h2>sessionStorage</h2>
<button onclick="saveData()">点我保存一个数据</button>
<button onclick="readData()">点我读取一个数据</button>
<button onclick="deleteData()">点我删除一个数据</button>
<button onclick="deleteAllData()">点我清空一个数据</button>
<script type="text/javascript" >
let p = {name:'张三',age:18}
function saveData(){
sessionStorage.setItem('msg','hello!!!')
sessionStorage.setItem('msg2',666)
sessionStorage.setItem('person',JSON.stringify(p))
}
function readData(){
console.log(sessionStorage.getItem('msg'))
console.log(sessionStorage.getItem('msg2'))
const result = sessionStorage.getItem('person')
console.log(JSON.parse(result))
// console.log(sessionStorage.getItem('msg3'))
}
function deleteData(){
sessionStorage.removeItem('msg2')
}
function deleteAllData(){
sessionStorage.clear()
}
</script>
</body>
</html>
2. 组件的自定义事件
-
一种组件间通信的方式，适用于：子组件 ===> 父组件
-
使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。
-
绑定自定义事件：
-
第一种方式，在父组件中：<Demo @atguigu=“test”/> 或 <Demo v -on:atguigu=“test”/>
-
第二种方式，在父组件中：
-
若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。
-
-
触发自定义事件：this.$emit(‘atguigu’,数据)
-
解绑自定义事件this.$off(‘atguigu’)
-
组件上也可以绑定原生DOM事件，需要使用native修饰符,否则会被当成自定义事件。
-
注意：通过this. r e f s . x x x . refs.xxx. refs.xxx.on(‘atguigu’,回调)绑定自定义事件时，回调要么配置在methods中，使用this调用回调名，要么用箭头函数在mounted中书写函数体，否则this指向会出问题！
App.vue
<template>
<div class="app">
<h1>{{ msg }}，学生姓名是:{{ studentName }}</h1>
<!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
<School :getSchoolName="getSchoolName" />
<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（方法一，使用@或v-on） -->
<!-- <Student @atguigu="getStudentName" @demo="m1" /> -->
<!-- 方法一:2.给student组件的实例对象vc绑定一个事件 -->
<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（方法二，使用ref） -->
<Student ref="student" @click.native="show" />
<!-- 方法二:2.给student绑定ref获取组件实例对象 -->
</div>
</template>
<script>
import Student from "./components/Student";
import School from "./components/School";
export default {
name: "App",
components: { School, Student },
data() {
return {
msg: "你好啊！",
studentName: "",
};
},
methods: {
getSchoolName(name) {
console.log("App收到了学校名：", name);
},
getStudentName(name, ...params) {
//方法一/二:1.定义一个方法
console.log("App收到了学生名：", name, params);
// 接收name和一个数组对象，数组内存储着其余参数
this.studentName = name;
},
m1() {
console.log("demo事件被触发了！");
},
show() {
alert(123);
},
},
mounted() {
// 方法二:3.App.vue挂载完毕，获取student的组件实例对象，绑定自定义事件
this.$refs.student.$on("atguigu", this.getStudentName); //绑定自定义事件
// this.$refs.student.$once('atguigu',this.getStudentName) //绑定自定义事件（一次性）
},
};
</script>
<style scoped>
.app {
background-color: gray;
padding: 5px;
}
</style>
student.vue
<template>
<div class="student">
<h2>学生姓名：{{ name }}</h2>
<h2>学生性别：{{ sex }}</h2>
<h2>当前求和为：{{ number }}</h2>
<button @click="add">点我number++</button>、
<!-- 方法一:3.定义 sendStudentlName点击事件-->
<!-- 方法二:4.定义 sendStudentlName点击事件-->
<button @click="sendStudentlName">把学生名给App</button>
<button @click="unbind">解绑atguigu事件</button>
<button @click="death">销毁当前Student组件的实例(vc)</button>
</div>
</template>
<script>
export default {
name: "Student",
data() {
return {
name: "张三",
sex: "男",
number: 0,
};
},
methods: {
add() {
console.log("add回调被调用了");
this.number++;
},
sendStudentlName() {
//方法一：4.触发Student组件实例身上的atguigu事件
//方法二：5.触发Student组件实例身上的atguigu事件
this.$emit("atguigu", this.name, 666, 888, 900);
// this.$emit("demo");
// 触发Student组件实例身上的demo事件
// this.$emit('click')
},
unbind() {
this.$off("atguigu"); //解绑一个自定义事件
// this.$off(['atguigu','demo']) //解绑多个自定义事件
// this.$off() //解绑所有的自定义事件
},
death() {
this.$destroy();
//销毁了当前Student组件的实例，销毁后所有Student实例的自定义事件全都不奏效，
// 原生DOM事件不受影响，但页面响应式丢了。
},
},
};
</script>
<style scoped>
.student {
background-color: pink;
padding: 5px;
margin-top: 30px;
}
</style>
school.vue
<template>
<div class="school">
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
<button @click="sendSchoolName">把学校名给App</button>
</div>
</template>
<script>
export default {
name:'School',
props:['getSchoolName'],
data() {
return {
name:'尚硅谷',
address:'北京',
}
},
methods: {
sendSchoolName(){
this.getSchoolName(this.name)
}
},
}
</script>
<style scoped>
.school{
background-color: skyblue;
padding: 5px;
}
</style>
3. 全局事件总线（GlobalEventBus）
1.Vue原型对象上包含事件处理的方法
1)$on(eventName,listener):绑定自定义事件监听
2)$emit(eventName,data):分发自定义事件
3)$off(eventName):解绑自定义事件监听
4)$once(eventName,listener):绑定事件监听,但只能处理一次
2.所有组件实例对象的原型对象的原型对象就是Vue的原型对象
1)所有组件对象都能看到Vue原型对象上的属性和方法
2)Vue.prototype.$bus=new Vue(),所有的组件对象都能看到$bus这个属性对象
3.全局事件总线
1)包含事件处理相关方法的对象(只有一个)
2)所有的组件都可以得到
- 一种组件间通信的方式，适用于任意组件间通信。
- 安装全局事件总线：
- 使用事件总线：
- 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。
- 提供数据：
- 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。
- 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。
main.js
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false
//创建vm
new Vue({
el:'#app',
render: h => h(App),
beforeCreate() {
Vue.prototype.$bus = this //安装全局事件总线
},
})
App.vue
<template>
<div class="app">
<h1>{{msg}}</h1>
<School/>
<Student/>
</div>
</template>
<script>
import Student from './components/Student'
import School from './components/School'
export default {
name:'App',
components:{School,Student},
data() {
return {
msg:'你好啊！',
}
}
}
</script>
<style scoped>
.app{
background-color: gray;
padding: 5px;
}
</style>
Student.vue
<template>
<div class="student">
<h2>学生姓名：{{ name }}</h2>
<h2>学生性别：{{ sex }}</h2>
<button @click="sendStudentName">把学生名给School组件</button>
</div>
</template>
<script>
export default {
name: "Student",
data() {
return {
name: "张三",
sex: "男",
};
},
mounted() {
// console.log('Student',this.x)
},
methods: {
sendStudentName() {
this.$bus.$emit("hello", this.name);
//提供数据，将student组件中的数据传递给school
},
},
};
</script>
<style scoped>
.student {
background-color: pink;
padding: 5px;
margin-top: 30px;
}
</style>
School.vue
<template>
<div class="school">
<h2>学校名称：{{ name }}</h2>
<h2>学校地址：{{ address }}</h2>
</div>
</template>
<script>
export default {
name: "School",
data() {
return {
name: "尚硅谷",
address: "北京",
};
},
mounted() {
// console.log('School',this)
this.$bus.$on("hello", (data) => {
console.log("我是School组件，收到了数据", data);
});
},
beforeDestroy() {
this.$bus.$off("hello");
// 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件,一定要写解绑的事件名，否则就全部解绑了
},
};
</script>
<style scoped>
.school {
background-color: skyblue;
padding: 5px;
}
</style>
4. 消息订阅与发布（pubsub）
- 这种方式的思想与全局事件总线很相似
- 它包含以下操作:
- 订阅消息–对应绑定事件监听
- 发布消息–分发事件
- 取消消息订阅–解绑事件监听
- 需要引入一个消息订阅与发布的第三方实现库
下载 Spubsub-js：npm install-Spubsub-js
相关语法:
(1)import PubSub from 'pubsub-js'//引入
(2)PubSub.subscribe(‘msgName’,functon(msgName,data){})订阅消息
(3)PubSub.publish(‘msgName’,data):发布消息,触发订阅的回调函数调用
(4)PubSub.unsubscribe(token):取消消息的订阅
使用步骤：
- 安装pubsub：npm i pubsub-js
- 在订阅和发布消息的文件中引入: import pubsub from 'pubsub-js’
- 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。
methods: {
demo(msgName, data) {
console.log(
"有人发布了hello消息，hello消息的回调执行了",
msgName,
data,
this
);
},
},
......
this.pubId = pubsub.subscribe("hello", this.demo);
提供数据：B组件传递数据，则在B组件中发布消息
methods: {
sendStudentName() {
// 发布消息：pubsub.publish(事件名，参数)，
pubsub.publish("hello", 666);
},
},
最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。
Student.vue
<template>
<div class="student">
<h2>学生姓名：{{ name }}</h2>
<h2>学生性别：{{ sex }}</h2>
<button @click="sendStudentName">把学生名给School组件</button>
</div>
</template>
<script>
import pubsub from "pubsub-js";
// 引入pubsub-js，pubsub是一个对象
export default {
name: "Student",
data() {
return {
name: "张三",
sex: "男",
};
},
methods: {
sendStudentName() {
// 发布消息：pubsub.publish(事件名，参数)，
pubsub.publish("hello", 666);
},
},
};
</script>
<style scoped>
.student {
background-color: pink;
padding: 5px;
margin-top: 30px;
}
</style>
School.vue
<template>
<div class="school">
<h2>学校名称：{{ name }}</h2>
<h2>学校地址：{{ address }}</h2>
</div>
</template>
<script>
import pubsub from "pubsub-js";
// 引入pubsub-js，pubsub是一个对象
export default {
name: "School",
data() {
return {
name: "尚硅谷",
address: "北京",
};
},
methods: {
demo(msgName, data) {
console.log(
"有人发布了hello消息，hello消息的回调执行了",
msgName,
data,
this
);
},
},
mounted() {
/*订阅消息：pubsub.subscribe（消息名，回调函数function(消息名，传入的参数){
console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
console.log(this);
这里this为undefined，想要避免有如下两种方法
}）
*/
// 方法一：this调用methods方法
// this.pubId = pubsub.subscribe("hello", this.demo);
// 方法二：使用箭头函数
this.pubId = pubsub.subscribe("hello", (msgName, data) => {
console.log("有人发布了hello消息，hello消息的回调执行了", msgName, data);
console.log(this);
});
},
beforeDestroy() {
// 取消订阅
pubsub.unsubscribe(this.pubId);
},
};
</script>
<style scoped>
.school {
background-color: skyblue;
padding: 5px;
}
</style>
5. nextTick
语法：this.$nextTick(回调函数)
作用：在下一次 DOM 更新结束后执行其指定的回调。
什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。
例如：我们界面总的编辑按钮，该输入框是否可编辑是通过某个值来控制的，当值改变后，DOM更新完成之后，我们需要鼠标重新指向我们输入框的位置，就需要该函数在DOM重新解析后在调用来达到进入编辑页面后，鼠标就自动汇聚到该输入框的功能。
点编辑后效果：
这篇关于Vue 学习笔记（三）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-16Vue3资料：新手入门必读教程
- 2024-11-16Vue3资料：新手入门全面指南
- 2024-11-16Vue资料：新手入门完全指南
- 2024-11-16Vue项目实战：新手入门指南
- 2024-11-16React Hooks之useEffect案例详解
- 2024-11-16useRef案例详解：React中的useRef使用教程
- 2024-11-16React Hooks之useState案例详解
- 2024-11-16Vue入门指南：从零开始搭建第一个Vue项目
- 2024-11-16Vue3学习：新手入门教程与实践指南
- 2024-11-16Vue3学习：从入门到初级实战教程
