自我总结篇之vue的组件通信（父传子子传父非父子）

一：父传子

父组件代码如下：

<template><div class="father"><child :message='message' :message2='message2'></child>
</div>
</template>
<script>
import child from '@/components/child.vue'
export default {components:{child},data(){return{message: '我是来自父组件的第一条message',message2:'我是来自父组件的第二条message'}}
}
</script>

子组件代码如下：

<template><div class="child">{{message}}<br/>{{message2}}</div>
</template>
<script>
export default {props:['message','message2']
}
</script>

运行结果如下图：

二：子传父

子组件代码如下：

<template><div class="child" ><button @click="sendMsgToParent">点击开始传值</button></div>
</template>
<script>
export default {data(){return{}},methods:{sendMsgToParent(){this.$emit('listenMsg','我是来自子组件的message')}}
}
</script>

父组件代码如下：

<template><div class="father">{{msg}}<child v-on:listenMsg="showMsg"></child>
</div>
</template>
<script>
import child from '@/components/child.vue'
export default {components:{child},data(){return{msg:'我是来自父组件的msg'}},methods:{showMsg(data){this.msg = data}}
}
</script>

运行结果如下：

点击按钮后，运行结果如下：

三：非父子

如果是非父子进行组件通信的话，我们首先要创建一个桥梁，通过这个桥梁使两个组件产生联系。

首先创建‘桥梁’-----bus.js，代码如下

import Vue from 'vue'
const bus = new Vue()
export default bus

然后组件A通过点击事件想将数据发送给组件B，代码如下

<template><div class="hello">{{number}}<br/><button @click="sendNumber()">发送</button></div>
</template>
<script>
import bus from '../assets/js/bus.js'
export default {data(){return{number:'我是hello组件参数123'}},methods:{sendNumber(){bus.$emit('acceptNumber',this.number)}} 
}
</script>

组件B接受发送过来的数据，代码如下

<template><div class="world">{{number}}</div>
</template>
<script>
import bus from '../assets/js/bus.js'
export default {data(){return{number:'我是world组件参数456'}},created(){bus.$on('acceptNumber',data =>{this.number = data})}
}
</script>

代码运行后，演示结果如下图