<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h3>非父子组件的传值</h3> <child content="Dell"></child> <child content="Lee"></child> </div> </body> <script type="text/javascript"> // 1.发布者订阅模式/总线机制/bus/观察者 // 2.vuex框架 //给每个vue实例都创建一个bus属性，bus属性又实例一个新的vue实例 Vue.prototype.bus = new Vue() Vue.component('child', { props: ['content'], data () { return { selfContent: this.content } }, template: '<div @click="handleClick">{{selfContent}}</div>', methods: { handleClick () { this.bus.$emit('change',this.selfContent) } }, //当实例被挂载以后执行 mounted () { //监听bus触发的change事件 this.bus.$on('change', msg => { this.selfContent = msg }) } }) let vm = new Vue({ el: '#app' }) </script> </html>
vue_非父子组件的传值_vue总线机制
猜你喜欢
转载自www.cnblogs.com/JunLan/p/12420887.html
今日推荐
周排行