一：父傳子

父組件代碼如下：

<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>

代碼運行后，演示結果如下圖

?

當點擊發送按鈕后，演示結果如下圖

至此，非父子組件通信完成。

?

轉載于:https://www.cnblogs.com/YMoonwind/p/11164129.html

總結

以上是生活随笔為你收集整理的自我总结篇之vue的组件通信（父传子 子传父 非父子）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。