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

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

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

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

5.我們依然可以對message的值進(jìn)行v-bind動態(tài)綁定

此時(shí)瀏覽器中

父組件向子組件傳值成功

總結(jié)一下：
1.子組件在props中創(chuàng)建一個(gè)屬性，用以接收父組件傳過來的值
2.父組件中注冊子組件
3.在子組件標(biāo)簽中添加子組件props中創(chuàng)建的屬性
4.把需要傳給子組件的值賦給該屬性

二、子組件向父組件傳值
1.在子組件中創(chuàng)建一個(gè)按鈕，給按鈕綁定一個(gè)點(diǎn)擊事件

2.在響應(yīng)該點(diǎn)擊事件的函數(shù)中使用$emit來觸發(fā)一個(gè)自定義事件，并傳遞一個(gè)參數(shù)

3.在父組件中的子標(biāo)簽中監(jiān)聽該自定義事件并添加一個(gè)響應(yīng)該事件的處理方法

4.保存修改的文件，在瀏覽器中點(diǎn)擊按鈕

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

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

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

2.第一個(gè)組件 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.第二個(gè)組件second.vue

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。