1、父組件向子組件傳值

首先在父組件定義好數據，接著將子組件導入到父組件中。父組件只要在調用子組件的地方使用v-bind指令定義一個屬性，并傳值在該屬性中即可，此時父組件的使命完成，請看下面關鍵代碼：

:content="item"

v-for="item in list"

:key="item.id"

>

【解析】

上面代碼中是導入進來的子組件，content是被v-bind指令定義的屬性，當然不用v-bind指令定義也一樣可以。只不過加了V-bind指令后，屬性值就會被當做JavaScript表達式來解析，而不加v-bind指令就會被當做字符串解析。比如Boolean="false"和:Boolean="false"解析出來的結果是不同滴。如果還是有點迷糊，請來看完整源碼

好了，下面我們來看看子組件此時要做的事情是什么？

首先在子組件中要使用關鍵詞props接收父組件傳遞過來的屬性，然后直接對這個屬性動手動腳就行了，十分簡單，在這直接上完整源碼：

• {{childItem}}
• {{message}}

name: 'ChildrenOne',

props: ["content"],

data() {

return {

message: this.content.id

}

}

}

2、子組件向父組件傳值

子組件向父組件傳值這一個技術點有個專業名詞，叫做“發布訂閱模式”，很明顯在這里子組件為發布方，而父組件為訂閱方。根據這個專業名詞，我們來看看子組件里面發生的事情。首先，需要觸發子組件視圖層里的某個事件，接著由該事件觸發的方法中又使用關鍵方法$emit()發布了一個自定義的事件，并且能夠傳入相關的參數。子組件所要的事情就只有這么多，下面我們看看核心源碼：

ChildrenOnclick() {

// 發布自定義事件

this.$emit("delete", this.index)

}

【解析】

上面代碼中，當ChildrenOnclick方法被觸發的時候，自定義了一個delete事件，并傳入了相關參數this.index。這里是完整源碼，能幫助你更好的理解。

在父組件中，只要訂閱由子組件發布的自定義事件即可。只要子組件的自定義事件被觸發，那么父組件就會執行相關的方法，下面是核心代碼：

:content="item"

:index="index"

v-for="(item, index) in list"

:key="item.id"

@delete="handleParentClick"

>

【解析】

上面代碼中，@delete是子組件自定義的事件，當該事件在子組件被觸發的時候，那么handleParentClick這個方法就會被執行，請看完整的代碼，以便更好的理解。

3、兄弟組件傳值

這塊我還不是灰常明白，只是知道大概如何去實現。首先在由vue-cli搭建起來的項目中的main.js創建一個事件總線，也就是中轉站，作為通信的橋梁。核心代碼如下：

// 建立中轉站，實現組件與組件之間的傳值

let bus = new Vue()

Vue.prototype.bus = bus

main.js完整代碼請點擊哦。

接著我們在發送方組件里面使用關鍵字$emit()定義一個自定義事件，并傳入參數。核心代碼如下：

methods: {

btnMessage() {

this.bus.$emit("ReceiveMessage", this.message)

}

}

【解析】

上面代碼中，this.bus為在main.js里定義好的一個中轉站變量，ReceiveMessage為自定義事件，this.message為定義好的參數，完整代碼在此。

最后是接收方組件，只要使用this.bus.$on關鍵字就能夠監聽到發送方觸發的事件，并在內部通過一個函數接收傳入進來的參數，執行相關的動作，下面請看完整代碼：

我是接收方組件，下面是接收到的信息

{{name}}

name: 'BrotherTwo',

data() {

return {

name: "我缺愛啊"

}

},

mounted() {

let self = this;

this.bus.$on("ReceiveMessage", function(item) {

self.name = item;

})

}

}

vue組件之間的傳值介紹就到這了，有不妥的地方希望各位大佬能夠指出。

總結

以上是生活随笔為你收集整理的vue变量传值_Vue各类组件之间传值的实现方式的全部內容，希望文章能夠幫你解決所遇到的問題。

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