vue组件传值不外乎三种,父传子、子传父、平级,今天我们就来着重说说vue平级组件如何传递参数值?
假设你有两个Vue组件需要通信: A 和 B ,A组件按钮上面绑定了点击事件,发送一则消息,B组件接收。
初始化,全局创建$bus
直接在项目中的 main.js 初始化 $bus :
// main.js window.$bus=new Vue();
注意,这种方式初始化一个 全局的事件总线 。
发送事件
$bus.$emit("aMsg", '来自A页面的消息');
<!-- A.vue --> <template> <button @click="sendMsg()">-</button> </template> <script> //import $bus from "../bus.js"; export default { methods: { sendMsg() { $bus.$emit("aMsg", '来自A页面的消息'); } } }; </script>
接下来,我们需要在 B页面 中接收这则消息。
接收事件
$bus.$on("事件名",callback)
<!-- IncrementCount.vue --> <template> <p>{{msg}}</p> </template> <script> //import $bus from "../bus.js"; export default { data(){ return { msg: '' } }, mounted() { $bus.$on("aMsg", (msg) => { // A发送来的消息 this.msg = msg; }); } }; </script>
事件总线推荐下面写法:
集中式的事件中间件就是 Bus。我习惯将bus定义到全局:
app.js
var eventBus = { install(Vue,options) { Vue.prototype.$bus = vue } }; Vue.use(eventBus);
然后在组件中,可以使用$emit, $on, $off 分别来分发、监听、取消监听事件:
分发事件的组件
// ... methods: { todo: function () { this.$bus.$emit('todoSth', params); //params是传递的参数 //... } }
监听的组件
// ... created() { this.$bus.$on('todoSth', (params) => { //获取传递的参数并进行操作 //todo something }) }, // 最好在组件销毁前 // 清除事件监听 beforeDestroy () { this.$bus.$off('todoSth'); }
如果需要监听多个组件,只需要更改 bus 的 eventName:
// ... created() { this.$bus.$on('firstTodo', this.firstTodo); this.$bus.$on('secondTodo', this.secondTodo); }, // 清除事件监听 beforeDestroy () { this.$bus.$off('firstTodo', this.firstTodo); this.$bus.$off('secondTodo', this.secondTodo); }
通过以上内容我们知道了vue兄弟平级组件如何传递参数值?感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容,希望对大家有所帮助!引用本文内容时,请注明出处!谢谢合作!