重庆五号线金建站,网络平台搭建是什么意思,保洁网站模板,wordpress+小米商城目录
一、 实现所有组件看到x事件
二、 实现$on $off 以及 $emit
总结不易~ 本章节对我有很大的收获#xff0c; 希望对你也是#xff01;#xff01;#xff01; 本节素材已上传至Gitee#xff1a;yihaohhh/我爱Vue - Gitee.com
全局事件总线图#xff1a; 本节素材…目录
一、 实现所有组件看到x事件
二、 实现$on $off 以及 $emit
总结不易~ 本章节对我有很大的收获 希望对你也是 本节素材已上传至Giteeyihaohhh/我爱Vue - Gitee.com
全局事件总线图 本节素材已上传至Giteeyihaohhh/我爱Vue - Gitee.com
一、 实现所有组件看到x事件 到main.js 里面设置全局总线
import Vue from vueimport App from ./App.vue// 关闭Vue生产提示
Vue.config.productionTip falseVue.prototype.x { a: 1, b: 2 }// 创建vm
new Vue({el: #app,render: h h(App)
}) 分别在School 和 Student组件上进行挂载输出当前对象 现在就是实现了第一个 能让所有组件看到 x 本节素材已上传至Giteeyihaohhh/我爱Vue - Gitee.com
二、 实现$on $off 以及 $emit
Vue.prototype.x { a: 1, b: 2 }
由于上面只是一个普通对象 所以我们没有办法能够访问它的$on, $off以及$emit 因为这些只存在组件的实例对象中 那么我们第一件事情就是要创建组件的实例对象。 这个d组件实例对象 就是相当于一个vc 只是一个组件的实例对象~ const Demo Vue.extend({}) // 创建一个组件
const d new Demo() // 组件的一个实例对象// Vue.prototype.x { a: 1, b: 2 }
Vue.prototype.x d 在School组件内进行事件绑定 mounted() {console.log(this.x)// $on 监听一个名字叫 hello 的事件一旦别人触发了这个事件我就执行后面的代码。// $on 给x绑定了一个hello 事件this.x.$on(hello, (data) {console.log(我是School组件 收到了数据, data)})}, 在Student组件内进行值的传递 button clicksendStudenName把学生名给School组件/buttonmethods: {sendStudenName() {this.x.$emit(hello, 666)}} 可以看到确实起到了全局的作用分别来进行值的输入和接收 但是定义那么多行的vc实在是过于臃肿我们就可以直接在创建vm的时候来直接定义全局事件 // 创建vm
new Vue({el: #app,render: h h(App),beforeCreate() {// 这里的 $bus 是一个全称Vue.prototype.$bus this // 这个this本身就是Vue的实例对象// 安装全局事件总线}
})
Student组件用来传值
button clicksendStudenName把学生名给School组件/button methods: {sendStudenName() {this.$bus.$emit(hello, this.name)}}
School用两个生命周期钩子进行获取值分别用来绑定事件 和 解绑解绑事件 mounted() {// $on 监听一个名字叫 hello 的事件一旦别人触发了这个事件我就执行后面的代码。// $on 给x绑定了一个hello 事件this.$bus.$on(hello, (data) {console.log(我是School组件 收到了数据, data)})},// 销毁之前的钩子// beforeDestroy已经废弃了// 用完了 一定要把傀儡身上的事件解绑beforeUnmount() {this.$bus.$off(hello)} TodoList全局事件总线传值 虽然我们学习了全局事件总线任意两个组件之间的通信都非常方便但是也不是所有组件之间的通信都要用上全局事件总线就比如父组件给子组件传递数据props就极其方便~ 但是在TodoList中的MyItem组件跟 App组件之间是爷孙关系 所以用全局事件总线就会比较方便~ 因为List组件是没有用到该方法的 而是转手就又传给了Item组件 所以这里用全局事件总线就会非常方便 那么我们就需要做到的是直接进行通信 不在进行逐层传递~ 第一步就是创建全局事件总线
// 创建vm
new Vue({el: #app,render: h h(App),beforeCreate() {Vue.prototype.$bus this}
})
第二步 清除掉List组件和App组件 以及 Item组件通过props传入的函数 MyList :todostodos /
第三步 确定是Item给App传递数据 methods: {handleCheck(id) {console.log(id)// this.checkTodo(id)this.$bus.$emit(checkTodo, id)},handleDelete(id) {if(confirm(确定删除吗)) {console.log(id)// this.deleteTodo(id)this.$bus.$emit(deleteTodo, id)}}} 利用全局事件总线 进行触发事件 分别对数据进行添加和删除的时候 这里都触发的是$bus全局事件~ 本节素材已上传至Giteeyihaohhh/我爱Vue - Gitee.com 总结不易~ 本章节对我有很大的收获 希望对你也是
