一、父組件向子組件傳值
在vue中通常使用props向子組件傳遞數據

1.創建子組件，在src/components/文件夾下新建一個Child.vue
2.Child.vue的中創建props，然后創建一個名為message的屬性

3.在App.vue中注冊Child組件，并在template中加入child標簽，標簽中添加message屬性并賦值

4.保存修改的文件，查看瀏覽器

5.我們依然可以對message的值進行v-bind動態綁定

此時瀏覽器中

父組件向子組件傳值成功

總結一下：
1.子組件在props中創建一個屬性，用以接收父組件傳過來的值
2.父組件中注冊子組件
3.在子組件標簽中添加子組件props中創建的屬性
4.把需要傳給子組件的值賦給該屬性

二、子組件向父組件傳值
1.在子組件中創建一個按鈕，給按鈕綁定一個點擊事件

2.在響應該點擊事件的函數中使用$emit來觸發一個自定義事件，并傳遞一個參數

3.在父組件中的子標簽中監聽該自定義事件并添加一個響應該事件的處理方法

4.保存修改的文件，在瀏覽器中點擊按鈕

子組件向父組件傳值成功
總結一下：
1.子組件中需要以某種方式例如點擊事件的方法來觸發一個自定義事件
2.將需要傳的值作為$emit的第二個參數，該值將作為實參傳給響應自定義事件的方法
3.在父組件中注冊子組件并在子組件標簽上綁定對自定義事件的監聽
4.在通信中，無論是子組件向父組件傳值還是父組件向子組件傳值，他們都有一個共同點就是有中間介質，子向父的介質是自定義事件，父向子的介質是props中的屬性。抓準這兩點對于父子通信就好理解了

三、非父子組件之間的傳值
1.公共實例文件bus.js，作為公共數控中央總線

import Vue from "vue"; export default new Vue();

2.第一個組件 first.vue

import Bus from '../bus.js'; export default {name: 'first',data () {return {value: '我來自first.vue組件！'}},methods:{add(){// 定義add方法，并將msg通過txt傳給second組件Bus.$emit('txt',this.value);}} }

3.第二個組件second.vue

import Bus from '../bus.js'; export default {name: 'second',data () {return {}},mounted:function(){Bus.$on('txt',function(val){//監聽first組件的txt事件console.log(val);});} }

這樣，就可以在第二個非父子關系的組件中，通過第三者bus.js來獲取到第一個組件的value

總結

以上是生活随笔為你收集整理的vue父子组件及非父子组件之间的传值的全部內容，希望文章能夠幫你解決所遇到的問題。

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