企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
## 非父子组件间组件传值 ![](https://box.kancloud.cn/e0a4c3a9d7261bcc5ebb3cbcccc7d18b_1277x546.png) ## 两种方式 1. 借助vuex. 2. 使用发布订阅模式,总线机制(Bus/总线/发布订阅模式/观察者模式) ## 总线机制 ``` <div id="app"> <child content="jack"></child> <child content="milan"></child> </div> <script> Vue.prototype.bus = new Vue(); Vue.component('child', { props: { content: String, }, data: function () { return { selfContent: this.content, }; }, template: ` <div @click="handleClick"> {{selfContent}} </div> `, methods: { handleClick: function () { this.bus.$emit('change', this.selfContent); } }, mounted: function () { var this_ = this; this.bus.$on('change', function (msg) { this_.selfContent = msg; }) } }); new Vue({ el: '#app', }); </script> ```