vue元件傳值的方法有哪些
vue元件傳值的方法：1、父向子傳值使用props；2、子向父傳值使用「$emit」；3、使用EventBus或Vuex進行兄弟傳值；4、使用「provide/inject」或「$attrs/$listeners」方法進行跨級傳值。
本教學操作環境：windows7系統、vue2.9.6版、Dell G3電腦。
我們都知道 Vue 作為一個輕量級的前端框架，其核心就是元件化開發。Vue 就是由一個一個的元件構成的，元件化是它的精髓，也是最強大的功能之一。而元件範例的作用域是相互獨立的，這就意味著不同元件之間的資料無法相互參照。
但在實際專案開發過程中，我們需要存取其他元件的資料，這樣就就有了元件通訊的問題。在 vue 中元件之間的關係有：父子，兄弟，隔代。針對不同的關係，怎麼實現資料傳遞，就是接下來要講的。
即父元件通過屬性的方式向子元件傳值，子元件通過 props 來接收。
在父元件的子元件標籤中繫結自定義屬性
// 父元件 <user-detail :myName="name" /> export default { components: { UserDetail } ...... }在子元件中使用props（可以是陣列也可以是物件）接收即可。可以傳多個屬性。
// 子元件 export default { props: ['myName'] } /* props: { myName: String } //這樣指定傳入的型別，如果型別不對會警告 props: { myName: [String, Number] } // 多個可能的型別 prosp: { myName: { type: String, requires: true } } //必填的的字串 props: { childMsg: { type: Array, default: () => [] } } // default指定預設值 如果 props 驗證失敗，會在控制檯發出一個警告。 */
子元件接收的父元件的值分為參照型別和普通型別兩種：
普通型別：字串（String）、數位（Number）、布林值（Boolean）、空（Null）
參照型別：陣列（Array）、物件（Object）
如果傳過來的值是簡單資料型別，是可以在子元件中修改，也不會影響其他兄弟元件內同樣呼叫了來自該父元件的值。
具體操作是可以先把傳過來的值重新賦值給data中的一個變數，然後再更改那個變數。
// 子元件 export default { props: ['myName'], data() { return { name : this.myName // 把傳過來的值賦值給新的變數 } }, watch: { myName(newVal) { this.name = newVal //對父元件傳過來的值進行監聽，如果改變也對子元件內部的值進行改變 } }, methods: { changeName() { this.name = 'Lily' // 這裡修改的只是自己內部的值，就不會報錯了 }, } }注：如果不使用 watch 來監聽父元件傳遞的 myName 值，子元件中的 name 值是不會隨著父元件的 myName 值進行改變，因為 data 中 name: this.myName 僅僅只是定義了一個初始值。
如果參照型別的值，當在子元件中修改後，父元件的也會修改，因其資料是公用的，其他同樣參照了該值的子元件也會跟著被修改。可以理解成父元件傳遞給子元件的值，就相當於複製了一個副本，這個副本的指標還是指向父元件中的那個，即共用同一個參照。所以除非有特殊需要，否則不要輕易修改。
1、子元件繫結一個事件，通過 this.$emit() 來觸發
在子元件中繫結一個事件，並給這個事件定義一個函數
// 子元件
<button @click="changeParentName">改變父元件的name</button>
export default {
methods: {
//子元件的事件
changeParentName: function() {
this.$emit('handleChange', 'Jack') // 觸發父元件中handleChange事件並傳參Jack
// 注：此處事件名稱與父元件中繫結的事件名稱要一致
}
}
}在父元件中定義並繫結 handleChange 事件
// 父元件
<child @handleChange="changeName"></child>
methods: {
changeName(name) { // name形參是子元件中傳入的值Jack
this.name = name
}
}2、通過 callback 函數
先在父元件中定義一個callback函數，並把 callback 函數傳過去
// 父元件
<child :callback="callback"></child>
methods: {
callback: function(name) { this.name = name
}
}在子元件中接收，並執行 callback 函數
// 子元件
<button @click="callback('Jack')">改變父元件的name</button>
props: {
callback: Function,
}3、通過 $parent / $children 或 $refs 存取元件範例
這兩種都是直接得到元件範例，使用後可以直接呼叫元件的方法或存取資料。
// 子元件
export default {
data () {
return {
title: '子元件'
}
},
methods: {
sayHello () {
console.log('Hello');
}
}
}// 父元件
<template>
<child ref="childRef" />
</template>
<script>
export default {
created () {
// 通過 $ref 來存取子元件
console.log(this.$refs.childRef.title); // 子元件
this.$refs.childRef.sayHello(); // Hello
// 通過 $children 來呼叫子元件的方法
this.$children.sayHello(); // Hello
}
}
</script>注：這種方式的元件通訊不能跨級。
4. $attrs / $listeners 詳解點這裡
三、兄弟元件之間傳值
1、還是通過 $emit 和 props 結合的方式
在父元件中給要傳值的兩個兄弟元件都繫結要傳的變數，並定義事件
// 父元件
<child-a :myName="name" />
<child-b :myName="name" @changeName="editName" />
export default {
data() {
return {
name: 'John'
}
},
components: {
'child-a': ChildA,
'child-b': ChildB,
},
methods: {
editName(name) {
this.name = name
},
}
}在子元件B中接收變數和繫結觸發事件
// child-b 元件
<p>姓名：{{ myName }}</p>
<button @click="changeName">修改姓名</button>
<script>
export default {
props: ["myName"],
methods: {
changeName() {
this.$emit('changeName', 'Lily') // 觸發事件並傳值
}
}
}
</script>// child-a 元件
<p>姓名：{{ newName }}</p>
<script>
export default {
props: ["myName"],
computed: {
newName() {
if(this.myName) { // 判斷是否有值傳過來
return this.myName
}
return 'John' //沒有傳值的預設值
}
}
}
</script>即：當子元件B 通過 $emit() 觸發了父元件的事件函數 editName，改變了父元件的變數name 值，父元件又可以把改變了的值通過 props 傳遞給子元件A，從而實現兄弟元件間資料傳遞。
2. 通過一個空 vue 範例
建立一個 EventBus.js 檔案，並暴露一個 vue 範例
import Vue from 'Vue'export default new Vue()
在要傳值的檔案裡匯入這個空 vue 範例，繫結事件並通過 $emit 觸發事件函數
(也可以在 main.js 中全域性引入該 js 檔案，我一般在需要使用到的元件中引入)
<template>
<div>
<p>姓名: {{ name }}</p>
<button @click="changeName">修改姓名</button>
</div>
</template>
<script>
import { EventBus } from "../EventBus.js"
export default {
data() {
return {
name: 'John',
}
},
methods: {
changeName() {
this.name = 'Lily'
EventBus.$emit("editName", this.name) // 觸發全域性事件,並且把改變後的值傳入事件函數
}
}
}
</script>在接收傳值的元件中也匯入 vue 範例，通過 $on 監聽回撥，回撥函數接收所有觸發事件時傳入的引數
import { EventBus } from "../EventBus.js"
export default {
data() {
return {
name: ''
}
},
created() {
EventBus.$on('editName', (name) => {
this.name = name
})
}
}這種通過建立一個空的 vue 範例的方式，相當於建立了一個事件中心或者說是中轉站，用來傳遞和接收事件。這種方式同樣適用於任何元件間的通訊，包括父子、兄弟、跨級，對於通訊需求簡單的專案比較方便，但對於更復雜的情況，或者專案比較大時，可以使用 vue 提供的更復雜的狀態管理模式 Vuex 來進行處理。
3. 使用 vuex →點這裡
四、多層父子元件通訊
有時需要實現通訊的兩個元件不是直接的父子元件，而是祖父和孫子，或者是跨越了更多層級的父子元件，這種時候就不可能由子元件一級一級的向上傳遞引數，特別是在元件層級比較深，巢狀比較多的情況下，需要傳遞的事件和屬性較多，會導致程式碼很混亂。
這時就需要用到 vue 提供的更高階的方法：provide/inject。
這對選項需要一起使用，以允許一個祖先元件向其所有子孫後代注入一個依賴，不論元件層次有多深，並在起上下游關係成立的時間裡始終生效。查 看 官 網
provide/inject：簡單來說就是在父元件中通過provider來提供變數，然後在子元件中通過inject來注入變數，不管元件層級有多深，在父元件生效的生命週期內，這個變數就一直有效。
父元件：
export default {
provide: { // 它的作用就是將 **name** 這個變數提供給它的所有子元件。
name: 'Jack'
}
}子元件：
export default {
inject: ['name'], // 注入了從父元件中提供的name變數
mounted () {
console.log(this.name); // Jack
}
}注：provide 和 inject 繫結並不是可響應的。即父元件的name變化後，子元件不會跟著變。
如果想要實現 provide 和 inject 資料響應，有兩種方法：
- provide 祖先元件的範例，然後在子孫元件中注入依賴，這樣就可以在後代元件中直接修改祖先元件的範例的屬性，不過這種方法有個缺點就是這個範例上掛載很多沒有必要的東西比如 props，methods
// 父元件
<div>
<button @click="changeName">修改姓名</button>
<child-b />
</div>
<script>
......
data() {
return {
name: "Jack"
};
},
provide() {
return {
parentObj: this //提供祖先元件的範例
};
},
methods: {
changeName() {
this.name = 'Lily'
}
}
</script>後代元件中取值：
<template>
<div class="border2">
<P>姓名：{{parentObj.name}}</P>
</div>
</template>
<script>
export default {
inject: {
parentObj: {
default: () => ({})
}
} // 或者inject: ['parentObj']
};
</script>注：這種方式在函數式元件中用的比較多。函數式元件，即無狀態(沒有響應式資料)，無範例化(沒有 this 上下文)，內部也沒有任何生命週期處理方法，所以渲染效能高，比較適合依賴外部資料傳遞而變化的元件。
使用 Vue.observable 優化響應式 provide，這個我用的不熟就不說了，可以 → 官方檔案
總結
父子通訊：父向子傳遞資料是通過 props，子向父是通過 $emit；通過 $parent / $children 通訊；$ref 也可以存取元件範例；provide / inject ；
兄弟通訊： EventBus；Vuex；
跨級通訊： EventBus；Vuex；provide / inject ；$attrs / $listeners；
相關推薦：《》
以上就是vue元件傳值的方法有哪些的詳細內容，更多請關注TW511.COM其它相關文章！