詳解vue組件之間的通信

更新時(shí)間：2020年08月30日 09:34:17 作者：OreO

這篇文章主要介紹了vue組件之間的通信，幫助大家更好的理解和學(xué)習(xí)前端的相關(guān)知識(shí)，感興趣的朋友可以了解下

說(shuō)明：下面我總結(jié)了比較常用的vue組件之前通信的方式，最近準(zhǔn)備面試，所以有些總結(jié)貼上來(lái)分享

props和$emit

只有父子關(guān)系才可以用這種方式，父組件向子組件傳遞參數(shù)用props，子向父?jìng)鬟f使用觸發(fā)$emit自定義事件

1.props

<!-- parent.vue, 可以傳遞`靜態(tài)`的props和`動(dòng)態(tài)`的props, 靜態(tài)的參數(shù)只能是個(gè)String類型的，如果是其他類型的一定要記得加`:`來(lái)表示這是一個(gè) js 表達(dá)式而不是一個(gè)字符串 -->
<Child :name="name" :age="18" address="xxxxx"></Child>
...
data () {
 return {
  name: 'marry'
 }
}

<!-- 傳一個(gè)參數(shù)所有props, 雖然目前我沒(méi)有這個(gè)需求，使用不帶參數(shù)的 v-bind -->
<blog-post v-bind="post"></blog-post>
post: {
 id: 1,
 title: 'My Journey with Vue'
}
//等價(jià)于下面
<blog-post
 v-bind:id="post.id"
 v-bind:title="post.title"
></blog-post>


<!-- child.vue -->
...
//以字符串?dāng)?shù)組形式列出的 prop
props: ['name', 'age', 'address']

//prop驗(yàn)證, 當(dāng) prop 驗(yàn)證失敗的時(shí)候，(開(kāi)發(fā)環(huán)境構(gòu)建版本的) Vue 將會(huì)產(chǎn)生一個(gè)控制臺(tái)的警告
//注意：以下類型不能寫成'String'這種帶引號(hào)的形式
props: {
 // 基礎(chǔ)的類型檢查 (`null` 和 `undefined` 會(huì)通過(guò)任何類型驗(yàn)證)
 propA: Number,  
 // 多個(gè)可能的類型
 propB: [String, Number],
 // 必填的字符串
 propC: {
  type: String,
  required: true
 },
 // 帶有默認(rèn)值的數(shù)字
 propD: {
  type: Number,
  default: 100
 },
 // 帶有默認(rèn)值的對(duì)象
 propE: {
  type: Object,
  // 對(duì)象或數(shù)組默認(rèn)值必須從一個(gè)工廠函數(shù)獲取
  default: function () {
  return { message: 'hello' }
  }
 },
 // 自定義驗(yàn)證函數(shù)
 propF: {
  validator: function (value) {
  // 這個(gè)值必須匹配下列字符串中的一個(gè)
  return ['success', 'warning', 'danger'].indexOf(value) !== -1
  }
 }
}
//注意那些 prop 會(huì)在一個(gè)組件實(shí)例創(chuàng)建之前進(jìn)行驗(yàn)證，所以實(shí)例的 property (如 data、computed 等) 在 default 或 validator 函數(shù)中是不可用的。

2.$emit

<!-- parent.vue -->
<Child @my-event="myEvent"></Child>
...
methods: {
 myEvent(name){
 this.name = name
 }
}

<!-- child.vue -->
<div>
 <button @click="$emit('my-event', name)"></button>
</div>
//使用自定義事件將子組件的值拋給父組件

中央事件總線 bus

用于解決跨級(jí)和兄弟組件通信問(wèn)題，巧妙的使用一個(gè)公共的vue實(shí)例，利用$on, $emit, $off(移除自定義事件監(jiān)聽(tīng)器)

方法一：

可以在main.js中，在Vue的原型上掛載一個(gè)公共的Vue實(shí)例 $bus，這樣全局任何一個(gè)地方都可以使用

Vue.prototype.$bus = new Vue()

然后在需要的地方注冊(cè)自定義事件和接收參數(shù)的回調(diào)函數(shù)

this.$bus.$on('changeName', name => {
 this.name = name
})

在需要改變的時(shí)候觸發(fā)事件并拋出參數(shù)

this.$bus.$emit('changeName', 'wzj')

方法二：

定義一個(gè)util.js文件

import Vue from 'vue'

const bus = new Vue()
export default bus

在需要用到bus的文件中引入

import bus from '../util' //文件路徑不一定

//在一個(gè)文件定義事件
bus.$on('changeName', name => {
 this.name = name
})

//另一個(gè)文件拋出參數(shù)
bus.$emit('changeName', 'wzj')

vuex

對(duì)于項(xiàng)目比較復(fù)雜，多組件共享狀態(tài)，不同層級(jí)需要通信

核心概念：

state, getter, mutation, action, module

//store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export dafault new Vuex.Store({
 state: {
 name: '',
 age: 0
 },
 getters: {
 tranName(state){
  return 'name: ' + state.name
 }
 },
 mutations: {
 changeName(state, name){
  state.name = name
 }
 },
 /*Action 函數(shù)接受一個(gè)與 store 實(shí)例具有相同方法和屬性的 context 對(duì)象，因此你可以調(diào)用 context.commit 提交一個(gè) mutation，或者通過(guò) context.state 和 context.getters 來(lái)獲取 state 和 getters */
 actions: { //異步函數(shù)，但還是要通過(guò)提交commit觸發(fā)mutations函數(shù)操作state
 changeName(context, name){
  context.commit('changeName', name)
 }
 },
 modules: {}
})

在組件中使用

方法一：

//訪問(wèn)state屬性
this.$store.state.name
//訪問(wèn)getters屬性
this.$store.getters.tranName
//訪問(wèn)mutations
this.$store.commit('changeName', 'wzj')
//訪問(wèn)actions
this.$store.dispatch('changeName', 'wzj')

方法二：使用輔助函數(shù)映射到本地，這里只列舉了簡(jiǎn)便的方式，更多查閱官網(wǎng)吧

import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'
//state 和 getters 映射到本地的computed屬性中，作為計(jì)算屬性使用
computed: {
 ...mapState(['name', 'age']),
 ...mapGetters(['tranName'])
}

//mutations 和 actions
methods: {
 // 將 `this.changeName()` 映射為 `this.$store.commit('changeName')`
 ...mapMutations(['changeName']) 
 // 將 `this.changeName()` 映射為 `this.$store.dispatch('changeName')`
 ...mapActions(['changeName'])
}

$attrs 和 $listeners

父組件與后代組件，用以上方法有點(diǎn)大材小用或者第一種有些不方便

$attrs 包含了父作用域中不作為 prop 被識(shí)別 (且獲取) 的 attribute 綁定 ( class 和 style 除外)。當(dāng)一個(gè)組件沒(méi)有聲明任何 prop 時(shí)，這里會(huì)包含所有父作用域的綁定 ( class 和 style 除外)，并且可以通過(guò) v-bind="$attrs" 傳入內(nèi)部組件。
$listeners 包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽(tīng)器。它可以通過(guò) v-on="$listeners" 傳入內(nèi)部組件——在創(chuàng)建更高層次的組件時(shí)非常有用。

例子：

//app.vue
<div>
 <One name="wzj" :age="age" address="xian" @changeAge="changeAge"></One>
</div>
...
data(){
 return {
 age: 10
 }
},
methods: {
 changeAge(age){
 this.age = age
 }
}

//one.vue
<div>
 <div>姓名：{{ name }}</div>
 <div>年齡：{{ age }}</div>
 <Two v-bind="$attrs" v-on="$listeners"></Two>
 <button @click="change">點(diǎn)我2</button>
</div>
...
props: ['name', 'age'],

//two.vue
<div>
 <div>{{ address }}</div>
 <button @click="change">點(diǎn)我2</button>
</div>
...
props: ['address'], //用$attrs傳遞到最后的屬性，在使用的時(shí)候還是要聲明props
methods: {
 change(){
 this.$emit('changeAge', 30)
 }
}

理解：其實(shí)祖先組件的屬性和事件還是一層層往下傳，不過(guò)用$attrs 和 $listeners優(yōu)化和簡(jiǎn)便了傳遞過(guò)程中書寫，而且在傳遞的過(guò)程中，任何一個(gè)聲明了 $listeners的組件都可以觸發(fā)里面的所有事件，而聲明了$attrs的組件只能使用之前未用props聲明的剩下的屬性。

以上就是vue組件之間的通信的詳細(xì)內(nèi)容，更多關(guān)于vue 組件通信的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: