點(diǎn)擊下載
本文文檔

當(dāng)前位置：首頁(yè) - 科技 - 知識(shí)百科 - 正文

Vue組件通信的幾種實(shí)現(xiàn)方法

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 21:58:03

Vue組件通信的幾種實(shí)現(xiàn)方法

Vue組件通信的幾種實(shí)現(xiàn)方法:組件的通信一般常見(jiàn)的組件之間的通信有以下幾種情況，A和B，B和C，B和D之間都是父子關(guān)系，C和D之間是兄弟組件關(guān)系。常用的通信手段有兩種： 1.ref：給元素或組件注冊(cè)引用信息 2.children:訪問(wèn)父級(jí)組件和子組件的實(shí)例。這兩種方式都是直接通過(guò)實(shí)例的

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀Vue組件通信的幾種實(shí)現(xiàn)方法:組件的通信一般常見(jiàn)的組件之間的通信有以下幾種情況，A和B，B和C，B和D之間都是父子關(guān)系，C和D之間是兄弟組件關(guān)系。常用的通信手段有兩種： 1.ref：給元素或組件注冊(cè)引用信息 2.children:訪問(wèn)父級(jí)組件和子組件的實(shí)例。這兩種方式都是直接通過(guò)實(shí)例的

組件的通信

一般常見(jiàn)的組件之間的通信有以下幾種情況，A和B，B和C，B和D之間都是父子關(guān)系，C和D之間是兄弟組件關(guān)系。

常用的通信手段有兩種：

1.ref：給元素或組件注冊(cè)引用信息

2.children:訪問(wèn)父級(jí)組件和子組件的實(shí)例。

這兩種方式都是直接通過(guò)實(shí)例的方式獲取的方式。示例如下：

//comA組件A
export default {
 data () {
 return {
 title: '測(cè)試通信'
 }
 },
 methods: {
 sayHello () {
 window.alert('你好');
 }
 }
}

這里引用組件A

<template>
 <comA ref="comA"></comA>
</template>
<script>
 export default {
 mounted () {
 const comA = this.$refs.comA;
 console.log(comA.title); // 測(cè)試通信
 comA.sayHello(); // 調(diào)用組件comA的方法
 }
 }
</script>

上面的例子我們可以看出我們使用ref來(lái)獲取組件的實(shí)例上的方法和數(shù)據(jù)

<div id="count">
 <button @click="showmsg">
 顯示兩個(gè)組件的信息
 </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 返回所有子組件的實(shí)例，是一個(gè)數(shù)組

<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>

這兩種方式是基于組件的上下文環(huán)境訪問(wèn)到父組件或者全部子組件（數(shù)組）。這種方式有很大的弊端是，無(wú)法跨級(jí)或兄弟間進(jìn)行通信，比如如下的結(jié)構(gòu)

// parent.vue
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>

我們假如想在組件A中獲取其他組件那么我們可能需要使用vuex或者和Bus事件總線的方式進(jìn)行解決。

事件總線

定義事件總線的方式有以下兩種

// bus.js 事件總線

import Vue from 'vue'
export const $bus = new Vue()

// main.js我們?cè)賛ain入口中定義這個(gè)事件總線
Vue.prototype.$bus = new Vue()

發(fā)送事件

對(duì)下面comA說(shuō)明，會(huì)接收來(lái)自父組件的參數(shù)number，并顯示出來(lái)；有個(gè)按鈕，點(diǎn)擊會(huì)調(diào)用函數(shù)handleAddRandom，生成一個(gè)隨機(jī)數(shù)，并調(diào)用事件總線的$emit方法，將隨機(jī)數(shù)給事件總線，由事件總線進(jìn)行數(shù)據(jù)傳遞。

<template>
 <div>
 {{number}}
 <button @click="handleAddRandom">隨機(jī)增加</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("生產(chǎn)的num:" + num);
 this.$bus.$emit('add', num);
 }
 }
 }
</script>

接收事件

<template>
 <div>
 隨機(jī)增加:
 <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中使用，否則不會(huì)生效
 this.$bus.$on('add', this.handleAddRandom);
 },
 beforeDestroy() {
 //需要在beforeDestroy中移除
 this.$bus.$off('add', this.handleAddRandom);
 }
 }
</script>

<style scoped>

</style>

上面是我們通過(guò)事件總線的方式進(jìn)行通信

然后我們來(lái)說(shuō)下另一種可以媲美Vuex的一種方式provide / inject

provide / inject

說(shuō)起這兩個(gè)API可能大家不太明白我們來(lái)舉例子說(shuō)明

// A組件
export default {
 provide: {
 name: 'Aresn'
 }
}

// B組件
export default {
 inject: ['name'],
 mounted () {
 console.log(this.name); // Aresn
 }
}

代碼中我們可以看到我們?cè)俳M件A中設(shè)置了一個(gè)provide:{name："Aresn"}，這個(gè)方法的作用就是將該變量提供給所有的子組件。我們?cè)贐組件中我們使用indect獲取了這個(gè)變量，這樣我們就可以使用this.name獲取到這個(gè)那么變量。下面我們可以使用一些騷操作大膽的替代Vuex。（這里說(shuō)明一下官網(wǎng)中不建議我們是使用這兩個(gè)API在常規(guī)應(yīng)用程序中，建議使用在高階組件中，建議歸建議用的好就可以啦）

使用provide / inject期待Vuex

<template>
 <div>
 <router-view></router-view>
 </div>
</template>
<script>
 export default {

 }
</script>
Vue cli中搭建出來(lái)的項(xiàng)目結(jié)構(gòu)中都會(huì)有一個(gè)app.vue作為入口組件，我們可以使用這個(gè)API在上面大做文章。
<script>
 export default {
 provide () {
 return {
 app: this
 }
 },
 data () {
 return {
 userInfo: null
 }
 },
 methods: {
 getUserInfo () {
 // 這里通過(guò) ajax 獲取用戶(hù)信息后，賦值給 this.userInfo，以下為偽代碼
 $.ajax('/user/info', (data) => {
 this.userInfo = data;
 });
 }
 },
 mounted () {
 this.getUserInfo();
 }
 }
</script>

這里我們把根組件實(shí)例作為一個(gè)參數(shù)傳遞給app變量，下面我們就可以通過(guò)app[變量||方法]達(dá)到vuex的目的

<template>
 <div>
 {{ app.userInfo }}
 </div>
</template>
<script>
 export default {
 inject: ['app'],
 methods: {
 changeUserInfo () {
 // 這里修改完用戶(hù)數(shù)據(jù)后，通知 app.vue 更新，以下為偽代碼
 $.ajax('/user/update', () => {
 // 直接通過(guò) this.app 就可以調(diào)用 app.vue 里的方法
 this.app.getUserInfo();
 })
 }
 }
 }
</script>

但是這樣做有一個(gè)弊端那就是可能會(huì)讓根組件app.vue的代碼變得特別的臃腫，當(dāng)然也有解決辦法，我們可以使用mixins混合的方式將不同的邏輯分開(kāi)寫(xiě)到不同的js里面然后通過(guò) mixins: [mixins_user]的方式在app.vue中引用這個(gè)mixin。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

Vue組件通信的幾種實(shí)現(xiàn)方法

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽： VUE 的方法種方法

熱門(mén)焦點(diǎn)

Vue組件通信的幾種實(shí)現(xiàn)方法

Vue組件通信的幾種實(shí)現(xiàn)方法

Vue組件通信的幾種實(shí)現(xiàn)方法

最新推薦

猜你喜歡

熱門(mén)推薦