相關知識點

• 父組件傳值到子組件
• 子組件傳值到父組件
• 兄弟組件之間傳值
• 祖代和后代之間傳值
• 任意兩個組件之間傳值

父組件傳值到子組件

父組件傳值到子組件基本方法有三個，分別為：

• 屬性 props
• 引用 $refs
• 子元素 $children

日常開發(fā)中，我們用到 props 和 $refs 頻率比較多，$children 相對較少些（我就沒怎么使用過~）。

屬性 props

在父組件中添加屬性，在子組件中接收使用，例如：

父組件：

<HelloWorld msg="Welcome to Your Vue.js App" />

子組件：

<h1>{{ msg }}</h1>

props: {
 msg: String
}

引用 $refs

在父組件中可以使用 this.$refs.xxx 獲取子組件中定義的數據或者方法，并使用。

父組件：

<HelloWorld ref="hw" />

mounted() {
 this.$refs.hw.foo = "bar";
}

子組件：

<p>{{ foo }}</p>

data() {
 return {
 foo: "foo"
 };
}

注意事項：

this.$refs.xxx 不能在 created 生命周期中使用，因為真實的 DOM 還沒有掛載完畢，如果非要想，可以使用 vm.$nextTick 來訪問 DOM。或者也可以這樣理解，父組件先于子組件創(chuàng)建，在父組件的 created 生命周期中子組件還沒有創(chuàng)建，所以獲取不到子組件。

在 Vue 中組件生命周期調用順序如下：

組建的調用順序都是 先父后子，渲染完成的順序是 先子后父

組件的銷毀操作是 先父后子，銷毀完成的順序是 先子后父

加載渲染過程

• 父 beforeCreate
• 父 created
• 父 beforeMount
• 子 beforeCreate
• 子 created
• 子 beforeMount
• 子 mounted
• 父 mounted

子組件更新過程

• 父 beforeUpdate
• 子 beforeUpdate
• 子 updated
• 父 updated

父組件更新過程

• 父 beforeUpdate
• 父 updated

銷毀過程

• 父 beforeDestroy
• 子 beforeDestroy
• 子 destroyed
• 父 destroyed

created() {
 console.log("第一個執(zhí)行");
 console.log(this.$refs.hw); // undefined
 this.$nextTick(() => {
 console.log("第三個執(zhí)行");
 console.log(this.$refs.hw); // 此時可以獲取到
 });
}

mounted() {
 console.log("第二個執(zhí)行");
 this.$refs.hw.foo = "bar";
}

子元素 $children

父組件：

this.$children[0].xx = "xxx";

注意事項：

$children 獲取當前實例的直接子組件。如果父組件中存在多個子組件，需要注意 $children 并不保證順序，也不是響應式的。

子組件傳值到父組件

子組件傳值到父組件使用的方法是自定義事件。在子組件中派發(fā)，在父組件中監(jiān)聽。

注意事項： 事件的派發(fā)者是誰，事件的監(jiān)聽者就是誰，只不過聲明的時候聲明在父組件中了。

分為三種情況：不傳遞參數、傳遞一個參數、傳遞多個參數。

不傳遞參數

子組件：

this.$emit('childFoo');

父組件：

<HelloWorld2 @childFoo="onChildFoo"></HelloWorld2>

methods: {
 onChildFoo() {
 console.log("====== onChildFoo ========");
 }
}

傳遞一個參數

在父組件中使用 $event 接收參數。

子組件：

this.$emit('childFooSingle', 'foo');

父組件：

<HelloWorld2 @childFooSingle="onChildFooSingle($event)"></HelloWorld2>

methods: {
 onChildFooSingle(e) {
 console.log(e); // foo
 }
}

傳遞多個參數

在父組件中使用 arguments 接收參數，會以數組的形式傳遞。

子組件：

this.$emit('childFooMultiple', 'foo', 'bar', 'dong');

父組件：

<HelloWorld2 @childFooSingle="onChildFooMultiple(arguments)"></HelloWorld2>

methods: {
 onChildFooMultiple(msg) {
 console.log(msg[0]); // foo
 console.log(msg[1]); // bar
 console.log(msg[2]); // dong
 }
}

兄弟組件之間傳值

兄弟組件之間傳值可以通過共同的父輩組件搭橋進行傳遞，例如：$parent、$root。

兄弟組件1：

this.$parent.$on('foo', handle);

兄弟組件2：

this.$parent.$emit('foo');

祖代和后代之間傳值

由于組件嵌套層數過多，使用 props 進行傳遞不切實際，vue 提供了 provide/inject API 完成該任務。

provide/inject 能夠實現祖先給后代傳值。

祖代：

provide() {
 return {foo: 'foo'}
}

后代：

inject: ['foo']

注意：provide 和 inject 主要為高階組件/組件庫提供用例，并不推薦直接用于應用程序代碼中，我們更多會在開源組件庫中見到。但是，反過來想要后代給祖代傳值，這種方案就不行了?。?！

官方提示：provide 和 inject 綁定并不是響應式的。這是刻意為之的。然而，如果你傳入了一個可監(jiān)聽的對象，那么其對象的 property 還是可響應式的。

祖代：

provide() {
 return {
 dong: this.home
 };
},
data() {
 return {
 home: ["App home"]
 };
}

后代：

inject: ["dong"]

this.dong = ["App data"]; // 會報錯，Avoid mutating an injected value directly since the changes will be overwritten whenever the provided component re-renders
this.dong.push("App data"); // 可以修改成功

任意兩個組件之間傳值

任意兩個組件之間傳值有兩種方案：事件總線、Vuex。

事件總線

創(chuàng)建一個 Bus 類負責事件派發(fā)、監(jiān)聽和回調管理。

首先創(chuàng)建一個 bus.js，并在 main.js 中引入，然后在組件中使用：

第一步：新建 plugins/bus.js

class Bus{
 constructor(){
 this.callbacks = {}
 }
 $on(name, fn){
 this.callbacks[name] = this.callbacks[name] || []
 this.callbacks[name].push(fn)
 }
 $emit(name, args){
 if(this.callbacks[name]){
  this.callbacks[name].forEach(cb => cb(args))
 }
 }
}

export default Bus;

第二步：main.js 中引入

import Bus from "./plugins/bus";
Vue.prototype.$bus = new Bus()

第三步：在組件中使用

組件1：

this.$bus.$on('foo', handle)

組件2：

this.$bus.$emit('foo')

Vuex

創(chuàng)建唯一的全局數據管理者 store，通過它管理數據并通知組件狀態(tài)變更。可以自行先了解一下官方文檔Vuex，具體詳細使用后續(xù)會寫一個專題~

總結

到此這篇關于Vue組件化常用方法之組件傳值與通信的文章就介紹到這了,更多相關Vue組件傳值與通信內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論