vue 兄弟组件相互通信
Posted xiaozhumaopao
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 兄弟组件相互通信相关的知识,希望对你有一定的参考价值。
兄弟组件之间相互传递数据
首先创建一个vue的空白实例(兄弟间的桥梁)
两个兄弟之间建立一个js文件
import Vue from ‘vue‘ export default new Vue()
子组件 childa
发送方使用 $emit 自定义事件把数据带过去
<template> <div> <span>A组件->{{msg}}</span> <input type="button" value="把a组件数据传给b" @click ="send"> </div> </template> <script> import vmson from "../../../util/emptyVue" export default { data(){ return { msg:{ a:‘111‘, b:‘222‘ } } }, methods:{ send:function(){ vmson.$emit("aevent",this.msg) } } } </script>
<template> <div> <span>b组件,a传的的数据为->{{msg}}</span> </div> </template> <script> import vmson from "../../../util/emptyVue" export default { data(){ return { msg:"" } }, mounted(){ vmson.$on("aevent",this.getEvnt) }, methods:{ getEvnt(val){ console.log(val); } } } </script>
父组件:
<template> <div> <childa></childa> <br /> <childb></childb> </div> </template> <script> import childa from ‘./childa.vue‘; import childb from ‘./childb.vue‘; export default { components:{ childa, childb }, data(){ return { msg:"" } }, methods:{ } } </script>
以上是关于vue 兄弟组件相互通信的主要内容,如果未能解决你的问题,请参考以下文章
vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例