Vue入门八、非父子组件间通讯

通过Bus总线机制实施非父子组件通讯
1、创建一个空实例（Bus中央事件总线也可以叫中间组件）
2、利用$emit $on 触发和监听事件实现非父子组件的通信
组件之间使用this.$bus.$on传值之前需要先this.$bus.$off注销事件
即：
this.$bus.$off('hiHeader').$on('hiHeader', (val) => {
this.sending = val
})
详见：组件之间使用this.$bus.$on传值之前需要先this.$bus.$off注销事件

一、通过this.$bus.$on()方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script type="text/javascript" src="vue.js"></script>
<div id="app"></div>
<script type="text/javascript">// 定义通讯中间件Vue.prototype.$bus = new Vue()var myHeader = {template: `<div>我是头部|{{sending}}</div>`,data() {return {sending: ''}},created() {// 先解绑再绑定，防止多组件点击失效// 这里this.$bus.$on监听中间件获取数据this.$bus.$off('hiHeader').$on('hiHeader', (val) => {this.sending = val})}}var myFoot = {template: `<div>我是脚<button @click="sendToHeader">发信息给头部</button></div>`,methods: {sendToHeader() {// 触发hiHeader事件传递数据this.$bus.$emit('hiHeader', '我的头可不是面团捏的')}}}new Vue({el: '#app',components: {myHeader,myFoot},template: `<div><myHeader></myHeader><myFoot></myFoot></div>`})
</script></body>
</html>

二、通过this重定向

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script type="text/javascript" src="vue.js"></script>
<div id="app"></div>
<script type="text/javascript">// 定义通讯中间件Vue.prototype.$bus = new Vue()var myHeader = {template: `<div>我是头部|{{sending}}</div>`,data() {return {sending: ''}},created() {// 重定向thisvar transfer = this// transfer.$bus.$off('hiHeader').$on('hiHeader', function (val) {//     transfer.sending = val// })transfer.$bus.$on('hiHeader', (val)=>{transfer.sending = val})}}var myFoot = {template: `<div>我是脚<button @click="sendToHeader">发信息给头部</button></div>`,methods: {sendToHeader() {// 触发hiHeader事件传递数据this.$bus.$emit('hiHeader', '我的头可不是面团捏的')}}}new Vue({el: '#app',components: {myHeader,myFoot},template: `<div><myHeader></myHeader><myFoot></myFoot></div>`})
</script></body>
</html>

转载于:https://blog.51cto.com/12012821/2401739

Vue入门八、非父子组件间通讯相关推荐

初识 Vue（18）---（非父子组件间的传值）
非父子组件间的传值常一个应用会以一棵嵌套的组件树的形式来组织:将一个大组件进行拆分下图这种情况的组件间传值(父子组件间传值) 方法:父组件通过 Props 向子组件传值,子组件通过事件触发向父组件 ...
组件间数据交互——父组件向子组件传值（ props属性值类型）子组件向父组件传值-携带参数 || 非父子组件间传值
父组件向子组件传值 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
bus.js非父子组件之间通讯
bus.js非父子组件之间通讯区别: bus.js就是一个公共的vue实例专门处理emit和on事件. vuex.js是做全局数据处理的,是指限定了对公共数据的使用处理方法,统一管控 vue中非父子 ...
vue学习【非父子组件传值问题（Bus/总线/观察者模式）】
如果两个组件是父子关系,就可以通过props的方式传值. 父组件通过props向子组件传值,子组件通过事件触发向父组件传值那么如果两个组件之间不具备父子关系,该如何传值呢?任何一个网页都可以拆分成几 ...
React组件通信-非父子组件间的通信
文章目录 React非父子组件通信小知识点的补充 Context应用场景 Context相关API Context使用流程 React非父子组件通信在React中, 非父子组件传递是通过一个API ...
vue入门学习篇——父子组件通信
Vue父子组件之间通信的原理父组件:props down -- 父组件通过props向下传递数据给子组件子组件:events up -- 子组件通过事件events向上传递数据给父组件下面我们来 ...
vue3非父子组件间传值
本示例基于vue3 使用要点:发送数据---- $bus.emit('password',num) 接收数据----在onMounted() 中 $bus.on('password',(data)= ...
vue组件间传值: 父传子、子传父、非父子组件传值
父组件向子组件传值 // 父组件通过属性将值传递给子组件 <template><div><closePopup :optionsID="optionsID&qu ...
Vue3（撩课学院）笔记02-创建组件，全局组件，局部组件，父子组件，组件标签化，组件的data数据共享，组件间通讯，props，父传子$ref，子传父$parent
1.创建一个组件首先要创建一个根组件进行挂载再创建一个子组件,完成子组件的逻辑子组件主要使用template模板来完成布局和逻辑把子组件通过根组件.component的方法挂载到根组件上 &l ...

Vue入门八、非父子组件间通讯

一、通过this.$bus.$on()方式

二、通过this重定向

Vue入门八、非父子组件间通讯相关推荐

最新文章

热门文章