set使用
Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的。
1 | mounted() { |
全局事件总线
首先,想要实现全局事件总线,就要安装全局事件总线,在main.js中完成全局事件总线的安装配置
1 | //创建vm |
接下来,我们就要对想要接收到数据的组件进行自定义事件的绑定,简单来说就是,谁要接收数据,自定义事件就绑定在谁身上
1 | mounted(){ |
最后一步,全局事件总线的触发,事件的触发是在发送数据的组件中完成的,简单来说,谁是数据的发送者,谁就来触发事件
1 | methods:{ |
在得到数据之后,解绑事件,提高性能
1 | // 销毁对应自定义事件 |
自定义事件
父组件使用props传递数据给子组件,子组件通过自定义事件传递给父组件
props父传子
- 首先在父组件APP的methods里面定义一个函数(需要接收一个参数),给子组件标签绑定这个函数
- 在子组件通过props声明接收这个函数,定义click一个事件
- 在子组件的methods里面书写事件函数,通过this函数名括号传数据
APP组件代码子组件代码1
2
3
4
5
6
7
8APP
<School :getSchool='getSchoolName'/>
定义一个接收参数的函数
methods:{
getSchoolName(name){
console.log('app收到了学校名',name)
}
}1
2
3
4
5
6
7
8
9
10定义一个click事件
<button @click="sendSchoolName">把学校名字给app</button>
声明接收父组件函数
props:['getSchoolName'],
调用事件函数并传参
methods:{
sendSchoolName(){
this.getSchoolName(this.name)
}
}
绑定自定义事件
实现步骤:
- 首先给子组件标签通过v-on:自定义事件名字=”函数名”,绑定一个函数,接着在父组件APP的methods里面定义这个函数(需要接收一个参数)
- 在子组件中,首先定义一个click事件,接着在methods内书写click事件函数,接着在methods内书写click事件函数,在其内部通过this.$emit()去触发APP组件里面的自定义事件,括号内的第一个参数是自定义事件名字,后面的参数是数据。(注意:给哪个子组件绑定自定义事件就去哪个子组件中去触发这个事件)
- 在子组件的methods里面定义触发这个函数的函数,通过this函数名括号传数据
APP组件代码子组件代码:1
2
3
4
5
6
7
8给子组件标签绑定函数
<Student :self='incident'/>
定义一个接收参数的函数
methods:{
incident(name){
console.log('app收到了学生名',name)
}
}1
2
3
4
5
6
7
8
9定义一个click事件
<button @click='sendSchoolName'>把学生名名字给app<button/>
调用事件函数,通过this.$emit()去触发APP组件里面的自定义事件
methods:{
sendSchoolName(){
this.$emit('self',this.name)
}
}