vue非父子组件、兄弟组件之间的传值通信 快来打我* 2022-10-17 00:48 188阅读 0赞 一般来说在vue项目里面的父、子组件间的传值很容易理解,父传子无非就是在子组件里面用`props`来显示的声明父组件传递的属性,例如: 子组件: <!--这是子组件 child.vue --> <template> <div class="not-found"> { { message }} </div> </template> <script> props: ['message'], export default { } </script> 在父组件里面 <!--这是父组件--> <template> <div class="not-found"> <child :message="someThing"></child> </div> </template> <script> props: ['message'], export default { data() { return { someThing: '这是要传递的信息' } } } </script> 如果子组件要向父组件传值 this.$emit('getMessage', 'aaa') // getMessage为父组件里定义的方法名,aaa为要传递的值 然后在父组件里面 methods: { getMessage(val) { console.log(val) // aaa } } 以上讲的是父子组件间的传值 兄弟组件之间的传值如下 需要建立一个通信总件`bus.js` 在`src`目录下面建立一个`utils`文件夹,在`utils`文件夹下建一个`bus.js`的文件,内容如下: // bus.js import Vue from 'vue' const Bus = new Vue() export default Bus 然后在`main.js`里面将其引入 // 引入通信总件,用于非父子组件间的传值 import Bus from '@/utils/bus' // 并将其挂载到vue的原型上 Vue.prototype.$bus = Bus 最后就是在兄弟组件之间一个使用 this.$bus.$emit('事件名A', '传递的信息') 来进行传递 在其他组件使用 this.$bus.$on('事件名A', val => { console.log(val) // 传递的信息 }) 来进行接收 其实还有其它方法,比如使用vuex、或者在父组件使用`provide`,子孙组件使用`inject`等。。。。
还没有评论,来说两句吧...