組件的通信
一般常見的組件之間的通信有以下幾種情況，A和B，B和C，B和D之間都是父子關系，C和D之間是兄弟組件關系。
常用的通信手段有兩種：
1.ref：給元素或組件注冊引用信息
2.children:訪問父級組件和子組件的實例。
這兩種方式都是直接通過實例的方式獲取的方式。示例如下：
//comA組件A
export default {
data () {
return {
title: '測試通信'
}
},
methods: {
sayHello () {
window.alert('你好');
}
}
}
這里引用組件A
<template>
<comA ref="comA"></comA>
</template>
<script>
export default {
mounted () {
const comA = this.$refs.comA;
console.log(comA.title); // 測試通信
comA.sayHello(); // 調用組件comA的方法
}
}
</script>
上面的例子我們可以看出我們使用ref來獲取組件的實例上的方法和數據
<div id="count">
<button @click="showmsg">
顯示兩個組件的信息
</button>
<child1></child1>
<child2></child2>
</div>
<template id="child1">
<div>
{{ msg }}
</div>
</template>
<template id="child2">
<div>
{{ msg }}
</div>
</template>
<script>
Vue.component('child1', {
template: '#child1',
data () {
return {
msg: '這是子組件1的信息'
}
}
})
Vue.component('child2', {
template: '#child2',
data () {
return {
msg: '這是子組件2的信息'
}
}
})
new Vue({
el: '#count',
data: {
},
methods: {
showmsg () {
for(var i = 0; i < this.$children.length; i++) {
alert(this.$children[i].msg)
}
}
}
})
</script>
$children 返回所有子組件的實例，是一個數組
<div id="count">
父組件中的msg: {{ msg }}
<child1 ref='c1'></child1>
<child2 ref='c2'></child2>
</div>
<template id="child1">
<div>
{{ msg }}
<button @click="showpmsg">
顯示父組件msg
</button>
</div>
</template>
<template id="child2">
<div>
{{ msg }}
</div>
</template>
<script>
Vue.component('child1', {
template: '#child1',
data () {
return {
msg: '這是子組件1的信息'
}
},
methods: {
showpmsg () {
alert(this.$parent.msg)
}
}
})
Vue.component('child2', {
template: '#child2',
data () {
return {
msg: '這是子組件2的信息'
}
}
})
new Vue({
el: '#count',
data: {
msg: 'hello parent'
}
})
</script>
這兩種方式是基于組件的上下文環境訪問到父組件或者全部子組件（數組）。這種方式有很大的弊端是，無法跨級或兄弟間進行通信，比如如下的結構
// parent.vue <component-a></component-a> <component-b></component-b> <component-c></component-c>
我們假如想在組件A中獲取其他組件那么我們可能需要使用vuex或者和Bus事件總線的方式進行解決。
事件總線
定義事件總線的方式有以下兩種
// bus.js 事件總線 import Vue from 'vue' export const $bus = new Vue()
// main.js我們再main入口中定義這個事件總線 Vue.prototype.$bus = new Vue()
發送事件
對下面comA說明，會接收來自父組件的參數number，并顯示出來；有個按鈕，點擊會調用函數handleAddRandom，生成一個隨機數，并調用事件總線的$emit方法，將隨機數給事件總線，由事件總線進行數據傳遞。
<template>
<div>
{{number}}
<button @click="handleAddRandom">隨機增加</button>
</div>
</template>
<script>
import $bus from ../bus.js
export default {
name: "counter",
props: {
number: {
type: Number
}
},
methods: {
handleAddRandom() {
const num = Math.floor(Math.random() * 100 + 1);
console.log("生產的num:" + num);
this.$bus.$emit('add', num);
}
}
}
</script>
接收事件
<template>
<div>
隨機增加:
<counter :number="number"></counter>
</div>
</template>
<script>
import counter from './counter'
export default {
name: "index",
components: {
counter
},
data() {
return {
number: 0
}
},
methods: {
handleAddRandom(num) {
this.number += num;
}
},
created() {
//this.$bus.$on需要在created中使用，否則不會生效
this.$bus.$on('add', this.handleAddRandom);
},
beforeDestroy() {
//需要在beforeDestroy中移除
this.$bus.$off('add', this.handleAddRandom);
}
}
</script>
<style scoped>
</style>上面是我們通過事件總線的方式進行通信
然后我們來說下另一種可以媲美Vuex的一種方式provide / inject
provide / inject
說起這兩個API可能大家不太明白我們來舉例子說明
// A組件
export default {
provide: {
name: 'Aresn'
}
}
// B組件
export default {
inject: ['name'],
mounted () {
console.log(this.name); // Aresn
}
}
代碼中我們可以看到我們再組件A中設置了一個provide:{name："Aresn"}，這個方法的作用就是將該變量提供給所有的子組件。我們在B組件中我們使用indect獲取了這個變量，這樣我們就可以使用this.name獲取到這個那么變量。下面我們可以使用一些騷操作大膽的替代Vuex。（這里說明一下官網中不建議我們是使用這兩個API在常規應用程序中，建議使用在高階組件中，建議歸建議用的好就可以啦）
使用provide / inject期待Vuex
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
Vue cli中搭建出來的項目結構中都會有一個app.vue作為入口組件，我們可以使用這個API在上面大做文章。
<script>
export default {
provide () {
return {
app: this
}
},
data () {
return {
userInfo: null
}
},
methods: {
getUserInfo () {
// 這里通過 ajax 獲取用戶信息后，賦值給 this.userInfo，以下為偽代碼
$.ajax('/user/info', (data) => {
this.userInfo = data;
});
}
},
mounted () {
this.getUserInfo();
}
}
</script>這里我們把根組件實例作為一個參數傳遞給app變量，下面我們就可以通過app[變量||方法]達到vuex的目的
<template>
<div>
{{ app.userInfo }}
</div>
</template>
<script>
export default {
inject: ['app'],
methods: {
changeUserInfo () {
// 這里修改完用戶數據后，通知 app.vue 更新，以下為偽代碼
$.ajax('/user/update', () => {
// 直接通過 this.app 就可以調用 app.vue 里的方法
this.app.getUserInfo();
})
}
}
}
</script>但是這樣做有一個弊端那就是可能會讓根組件app.vue的代碼變得特別的臃腫，當然也有解決辦法，我們可以使用mixins混合的方式將不同的邏輯分開寫到不同的js里面然后通過 mixins: [mixins_user]的方式在app.vue中引用這個mixin。
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
