网站建设126,wordpress 重新安装,广州手工外发加工网,怎样做网络推广佳选豪升网络好目录
概述
props配置项-回调函数实现
自定义事件实现
事件总线实现
消息订阅与发布实现#xff08;pubsub-js库#xff09; 概述
在组件化编程中#xff0c;组件间的通信是重要的#xff0c;我们可以有四种方式实现组件间的通信。
分别是#xff1a;函数回调pubsub-js库 概述
在组件化编程中组件间的通信是重要的我们可以有四种方式实现组件间的通信。
分别是函数回调自定义事件事件总线和消息订阅与发布。
props配置项-回调函数实现 需求父组件App.vue给子组件Student.vue传递数据 父组件想要给子组件传递数据只需要父组件在使用子组件的位置直接声明传递即可子组件使用props配置项接收父组件传入的数据。
App组件父组件
templatediv idapp!--将data中的数据name传入Student子组件--Studnet :namename/Studnet/div
/templatescript
import Studnet from ./components/Studnet.vueexport default {name: App,data(){return {name:Tom}},components: {Studnet}
}
/script
Studnet组件子组件
templatedivbutton clickprintAppData点击/button/div
/templatescriptexport default {name:Student,// 子组件Student使用props配置项接收父组件传入的数据// 接收时注意需要加引号props:[name],methods:{printAppData(){// 当点击事件触发后直接打印传入的数据console.log(this.name);}}}
/script
当父组件传递给子组件数据后像如上案例传入的数据会存在子组件的data中是响应式的。 测试 当我们点击按钮后查看控制台 子组件给父组件传递数据 我们在实现子组件给父组件传递数据的时候要是还是想要使用props直接传递的话显然不合适。
因为props只能父组件在调用子组件时声明传递数据。
但是虽然我们不能直接传递数据但是我们可以换一个思路那就是我们在父组件向子组件传递回调函数当子组件在合适的时机调用传入的回调函数时可以设置函数参数那么我们在父组件的函数实现就可以获取到调用函数时传入的参数数据。 App组件父组件
templatediv idapp!--传递回调函数getData--Studnet :namename :getDatagetData//div
/templatescript
import Studnet from ./components/Studnet.vueexport default {name: App,data(){return {name:Tom}},components: {Studnet},methods:{// 编写处理函数可接受参数当子组件调用并传入参数后在此可以接收到getData(age){console.log(获取到子组件的参数:,age);}}
}
/scriptStudent组件子组件
templatedivbutton clickprintAppData点击(父向子组件传数据)/button!--当点击的时候执行传入的回调函数并传入参数数据age给父组件的处理函数--button clickgetData(age)点击(子向父组件传数据)/button/div
/templatescriptexport default {name:Student,// 接收回调函数getDataprops:[name,getData],data(){return{age:18}},methods:{printAppData(){console.log(接收到父组件传递的数据是:,this.name);},}}
/scriptstyle/style 总结 1.如上实现组件的通信主要就是依靠props传递要是父组件想要给子组件传递数据直接在模板中使用子组件时声明传递即可。 2.如果子组件想要给父组件传递数据那么需要父组件传入代参的回调函数当子组件想要给父组件传递数据时就调用回调函数并且传参父组件中的回调处理函数就可以接收到子组件调用时传入的参数了。 3.使用此方式通信有一定缺点如果是多层的组件嵌套那么需要使用props逐层传递才可以并且不可以实现兄弟组件间的通信。 自定义事件实现 需求子组件给父组件传递数据使用自定义事件实现 实现 我们可以在父组件中给子组件绑定一个自定义事件并且在父组件中编写事件处理函数子组件在合适的时机执行此自定义事件的时候传递一些数据即可。触发方式类似于第一种方式但是此方式省去了使用props传递和接收的步骤。
App组件父组件
templatediv idapp!-- 给Student组件子组件绑定一个myEvent自定义事件 --Studnet myEventmyEvent//div
/templatescript
import Studnet from ./components/Studnet.vueexport default {name: App,data(){return {}},components: {Studnet},methods:{// 当自定义事件被子组件触发时执行此函数获取触发事件时传入的参数myEvent(name){console.log(获取到子组件的参数:,name);}}
}
/scriptStudent组件子组件
templatediv// 声明一个点击事件做测试button clickclcikHandle点击触发自定义事件/button/div
/templatescriptexport default {name:Student,// 接收回调函数data(){return{name:Tom}},methods:{// 当点击事件触发后我们使用$emit触发自定义事件并传入参数clcikHandle(){// 参数$emit自定义事件名称传入的参数可以是多个逗号分隔this.$emit(myEvent,this.name)}}}
/script 测试 当我们点击按钮控制台打印 在其中我们给子组件绑定自定义事件还有另一种方式 给子组件声明ref属性这样就可以使用this.$refs获取到给节点Student子组件 Studnet refstudnetComp/ 通过ref属性获取到节点再给节点绑定事件即可此方式更灵活 this.$refs.studnetComp.$on(自定义事件,处理函数) 解绑自定义事件 this.$off([事件名称1事件名称2]) // 可以一次解绑多个自定义事件 事件总线实现 事件总线 实现任意组件间的直接通信上方的props传递回调函数或者是自定义事件的方式实现的组件通信都存在一些不足当我们想要第一级组件和第三级组件间的通信时就需要逐层传递又或者是兄弟组件间通信是实现不了的所以出现了事件总线的事件。
原理概述其原理就是我们找出一个公共可访问区域在此区域绑定自定义事件当想要给某组件传递数据时只需要执行该组件在公共区域放置的自定义事件并传递参数即可。
例如A组件想要给B组件传递参数那么我们就可以让B组件在公共区域绑定自定义事件并编写带参的事件处理函数当A想要给B传递参数时只需要在公共区域找到B组件声明的自定义组件使用$emit执行并传入参数即可当执行了自定义事件A组件的事件处理函数就会获得执行时传入的参数。 示例图解 当我们B组件想要给A组件传递数据时只需要A组件在公共区域绑定自定义事件并书写事件处理函数接收参数当B组件想传递数据的时候找到A组件在公共区域绑定的自定义事件执行并传入参数那么A组件中的事件处理函数将接收到传来的参数那么我们就可以实现B组件给A组件传递数据了。
此公共区域可以为任意组件服务实现任意组件的数据直接通信所以我们称此公共区域叫做事件总线因为它控制着所有组件的事件绑定。 公共位置是需要一些条件的例如可以使用$emit,$on等方法并且可以放置自定义事件。 其实就是在VUE原型对象上绑定可以在VUE原型对象上绑定事件并且可以使用原型上的方法那么我们就只能考虑实例对象vc或vm当作我们的总线。 需求兄弟组件间传递数据 Student组件给Student1组件传递数据 1.给Vue原型对象上添加$bus属性值为vm 安装全局事件总线
// 在mian.js中操作
new Vue({render: h h(App),beforeCreate(){// 给Vue原型对象添加$bus属性值为vm当做我们的总线Vue.prototype.$bus this}
}).$mount(#app)
2.Student1数据接收方组件在总线上绑定事件
export default {
name:Student1,
mounted(){// 当Vue挂载完毕给vc的$bus属性绑定自定义事件this.$bus.$on(myEvent,this.printInfo)
},
methods:{// 编写事件处理函数printInfo(args){// 当有组件执行自定义事件后就可以接收到参数console.log(获取到的参数为:,args);}
} ps其中至于此方式我们在Vue原型上声明的$bus属性vc可以访问到的这个问题其实是Vue更改了原型链指向。不了解可以看看这篇博客有内存图解声明。 总之此方式就可让组件Student1在$bus上绑定自定义事件。 3.Studnet数据提供方组件在合适的时机执行studnet1在$bus上绑定的自定义事件并传入参数作为数据。
// 当点击页面上某个按钮时执行自定义事件并传入参数
clcikHandle(){// 执行$bus上的自定义事件myEvent并传入参数namethis.$bus.$emit(myEvent,this.name)
} 总结此方式可以实现任意组件间的直接通信并且在触发自定义事件时还可以再浏览器的Vue开发工具中捕获到一些信息。是比较推荐使用的组件通信方式实现。 消息订阅与发布实现pubsub-js库
此方式也可以实现任意组件间的通信跟事件总线的实现方式很相似就像是事件总线的封装版。
消息发布与订阅是一种思想
订阅者需要数据的组件
发布者提供数据的组件
概述当订阅者想要获取数据就要对外暴露订阅消息指定订阅的消息名当发布者想要给某个订阅者发送消息就要找到订阅者订阅的消息名就能够实现数据传递。
实现此思想的JS库有许多在此使用pubsub-js做演示 使用步骤 需求Student组件给Student1组件传递数据 1.下载库pubsub-js 2.订阅消息Studnet1组件-接收数据 导入pubsub库 import pubsub from pubsub-js // 发布订阅消息当有对应消息名称发布时会传递数据进来
// 消息处理函数通过函数参数接收
pubsub.subscribe(消息名,消息处理函数)
3.发布消息Studnet组件-提供数据 导入pubsub库 import pubsub from pubsub-js // 发布消息对应的订阅了此消息名的函数会执行并且接收到此参数
pubsub.publish(消息名,参数) 总结此方式跟事件总线的实现方式很像其实两者的操作思路都是一样的大致是:一方声明带参的事件事件处理函数另一方执行并传入参数但是事件总线的方式更值得推荐因为不需要导入第三方库并且在浏览器Vue管理工具能够捕获到触发的总线事件。
