vue組件間怎麼進行通訊？ 12種通信方式分享
- 青灯夜游轉載
- 2021-12-06 19:18:032239瀏覽
vue組件間怎麼進行通訊？本篇文章給大家超詳細的介紹12種vue組件間通訊的方式，希望對大家有幫助。
vue是數據驅動視圖更新的框架, 我們平時開發，都會把頁面不同模組拆分成一個一個vue組件， 所以對於vue來說組件間的數據通訊非常重要，那麼元件之間如何進行資料通訊的呢？
首先我們需要知道在vue中元件之間存在什麼樣的關係, 才更容易理解他們的溝通方式。 【相關推薦：《vue.js教學》】
#一般我們分為以下關係：
- 父子元件之間通訊
- #非父子元件之間通訊(兄弟元件、隔代關係元件等)
props / $emit
父元件透過props的方式向子元件傳遞數據，而透過$emit 子元件可以向父元件通訊。
- 父元件傳送值
<!-- 父组件 -->
<template>
<div class="section">
<child :msg="articleList"></child>
</div>
</template>
<script>
import child from './child.vue'
export default {
name: 'HelloWorld',
components: { comArticle },
data() {
return {
msg: '阿离王'
}
}
}
</script><!-- 子组件 child.vue -->
<template>
<div>
{{ msg }}
</div>
</template>
<script>
export default {
props: {
msg: String
}
}
</script>
prop 只可以從上一層元件傳遞到下一層組件（父子組件），即所謂的單向資料流。而且 prop 只讀，不可被修改，所有修改都會失效並警告。
-
第一，不應該在一個子元件內部改變 prop，這樣會破壞單向的資料綁定，導致資料流難以理解。如果有這樣的需要，可以透過 data 屬性接收或使用computed 屬性進行轉換。 -
第二，如果props傳遞的是引用類型(物件或數組)，在子元件中改變這個物件或數組，父元件的狀態會也會做相對應的更新，利用這一點就能夠實現父子元件資料的「雙向綁定」，雖然這樣實作能夠節省程式碼，但會犧牲資料流向的簡潔性 ，令人難以理解，最好不要這樣做。 -
想要實作父子元件的資料“雙向綁定”，可以使用v-model或.sync 。
- 子元件向父元件傳值
使用$emit 向父元件傳數據，原理這樣的: 父元件在子元件透過v-on監聽函數並接收參數，vue框架就在子元件監聽了你v-on="fn"的fn事件函數，在子元件中使用$emit
<!-- 父组件 -->
<template>
<div class="section">
<child :msg="articleList" @changMsg="changMsg"></child>
</div>
</template>
<script>
import child from './child.vue'
export default {
name: 'HelloWorld',
components: { comArticle },
data() {
return {
msg: '阿离王'
}
},
methods:{
changMsg(msg) {
this.msg = msg
}
}
}
</script><!-- 子组件 child.vue -->
<template>
<div>
{{ msg }}
<button @click="change">改变字符串</button>
</div>
</template>
<script>
export default {
props: {
msg: String
},
methods: {
change(){
this.$emit('changMsg', '阿离王带你学习前端')
}
}
}
</script>
v-model 指令v-model 是用來在表單控制項或元件上建立雙向綁定的，他的本質是v-bind 和v-on 的語法糖，在一個元件上使用 v-model，預設會為元件綁定名為value 的prop 和名為input
當我們元件中的某一個 prop 需要實現上面所說的」雙向綁定「時，v-model 就能大顯身手了。有了它，就不需要自己手動在元件上綁定監聽目前實例上的自訂事件，會使程式碼更簡潔
下面以一個 input 元件實作的核心程式碼，介紹下 v-model
<!--父组件-->
<template>
<base-input v-model="inputValue"></base-input>
</template>
<script>
export default {
data() {
return {
input: ''
}
},
}
</script><!--子组件-->
<template>
<input type="text" :value="currentValue" @input="handleInput">
</template>
<script>
export default {
data() {
return {
currentValue: this.value === undefined || this.value === null ? ''
}
},
props: {
value: [String, Number], // 关键1
},
methods: {
handleInput(event) {
const value = event.target.value;
this.$emit('input', value); // 关键2
},
},
}
</script>上面範例看到，v-model="inputValue" 他的本質就是v-bind 和v-on 的語法糖，預設為父元件綁定名為:value="inputValue"的屬性，和@input="(v) => { this.inputValue = v }"事件，子元件經過this.$emit('input', value) 通知父元件所以他原理也是利用了我們上面講的父子元件傳參props / $emit
有時，在某些特定的控制項中名為value 的屬性會有特殊的意義，這時可以透過v-model
-
.sync修飾符在vue 1.x 的版本中就已經提供，1.x 版本中，當子元件改變了一個有.sync的prop 的值時，會將這個值同步到父元件中的值。這樣使用起來十分方便，但問題也十分明顯，這樣破壞了單向資料流，當應用複雜時，debug 的成本會非常高。 -
於是乎，在vue 2.0中移除了.sync。但在實際的應用中，.sync是有它的應用場景的，所以在vue 2.3版本中，又迎來了全新的.sync 。 -
新的.sync修飾符所實現的不再是真正的雙向綁定，它的本質和v-model 類似，只是一種縮寫。
<text-document v-bind:title="doc.title" v-on:update:title="doc.title = $event" />
上面的程式碼，使用.sync 就可以寫成<text-document v-bind:title.sync="doc.title" />這樣，在子元件中，就可以透過下面程式碼來實現對這個prop 重新賦值了。 ###
this.$emit('update:title', newTitle)
看到这里，是不是发现 .sync 修饰符 和 v-model 很相似，也是语法糖， v-bind:title.sync 也就是 等效于 v-bind:title="doc.title" v-on:update:title="doc.title = $event"
v-model 和 .sync 对比
.sync 从功能上看和 v-model 十分相似，都是为了实现数据的“双向绑定”，本质上，也都不是真正的双向绑定，而是语法糖。
相比较之下，.sync 更加灵活，它可以给多个 prop 使用，而 v-model 在一个组件中只能有一个。
从语义上来看，v-model 绑定的值是指这个组件的绑定值，比如 input 组件，select 组件，日期时间选择组件，颜色选择器组件，这些组件所绑定的值使用 v-model 比较合适。其他情况，没有这种语义，个人认为使用 .sync 更好。
children
通过$parent和$children就可以访问组件的实例，拿到实例代表什么？代表可以访问此组件的所有方法和data。列子如下：
<!-- 父组件 -->
<template>
<div class="hello_world">
<div>{{msg}}</div>
<com-a></com-a>
<button @click="changeA">点击改变子组件值</button>
</div>
</template>
<script>
import ComA from './test/comA.vue'
export default {
name: 'HelloWorld',
components: { ComA },
data() {
return {
msg: 'Welcome'
}
},
methods: {
changeA() {
// 获取到子组件A
this.$children[0].messageA = 'this is new value'
}
}
}
</script><!-- 子组件 -->
<template>
<div class="com_a">
<span>{{messageA}}</span>
<p>获取父组件的值为: {{parentVal}}</p>
</div>
</template>
<script>
export default {
data() {
return {
messageA: 'this is old'
}
},
computed:{
parentVal(){
return this.$parent.msg;
}
}
}
</script>要注意边界情况，如在#app上拿$parent得到的是new Vue()的实例，在这实例上再拿$parent得到的是undefined，而在最底层的子组件拿$children是个空数组。也要注意得到children的值不一样，$children 的值是数组，而$parent是个对象
props $emit 、 $parent $children两种方式用于父子组件之间的通信， 而使用props进行父子组件通信更加普遍，二者皆不能用于非父子组件之间的通信。
provide / inject
provide / inject 是vue2.2.0新增的api, 简单来说就是父组件中通过provide来提供变量, 然后再子组件中通过inject来注入变量。
官方描述： 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效
provide 选项应该是
- 一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。
inject 选项应该是：
- 一个字符串数组
- 一个对象(详情点击这里)
基本用法
// 祖先组件 提供foo
//第一种
export default {
name: "father",
provide() {
return {
foo: 'hello'
}
},
}
//第二种
export default {
name: "father",
provide: {
foo:'hello~~~~'
},
}//后代组件 注入foo, 直接当做this.foo来用
export default {
inject:['foo'],
}上面的两种用法有什么区别吗？
- 如果你只是传一个字符串，像上面的
hello，那么是没有区别的，后代都能读到。 - 如果你需要
this对象属性的值（如下所示代码），那么第二种是传不了的，后代组件拿不到数据。所以建议只写第一种
//当你传递对象给后代时
provide() {
return {
test: this.msg
}
},注意：一旦注入了某个数据，比如上面示例中的 foo，那这个组件中就不能再声明 foo 这个数据了，因为它已经被父级占有。
provide 和 inject 绑定并不是可响应的。
这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。因为对象是引用类型。
先来个值类型的数据（也就是字符串）例子，不会响应
provide(){
return{
test:this.msg
}
},
data() {
return {
msg: "Welcome to Your Vue.js App",
}
}
mounted(){
setTimeout(()=>{
this.msg = "halo world";
console.log(this._provided.msg)
//log：Welcome to Your Vue.js App
},3000)
},如上所示，这样做是不行的，打印出来的 _provided 中的数据并没有改，子组件取得值也没变。
你甚至可以直接给 this._provided.msg 赋值，但是即使是_provided.msg 里面的值改变了，子组件的取值，依然没有变。
当你的参数是对象的时候，就可以响应了，如下：
provide(){
return{
test:this.activeData
}
},
data() {
return {
activeData:{name:'halo'},
}
}
mounted(){
setTimeout(()=>{
this.activeData.name = 'world';
},3000)
}这就是vue官方中写道的对象的属性是可以响应的
provide/inject 实现全局变量
provide/inject不是只能从祖先传递给后代吗？是的，但是，如果我们绑定到最顶层的组件app.vue，是不是所有后代都接收到了，就是当做全局变量来用了。
//app.vue
export default {
name: 'App',
provide(){
return{
app:this
}
},
data(){
return{
text:"it's hard to tell the night time from the day"
}
},
methods:{
say(){
console.log("Desperado, why don't you come to your senses?")
}
}
}//其他所有子组件，需要全局变量的，只需要按需注入app即可
export default {
inject:['foo','app'],
mounted(){
console.log(this.app.text); // 获取app中的变量
this.app.say(); // 可以执行app中的方法，变身为全局方法！
}
}provide/inject 实现页面刷新，不闪烁
- 用
vue-router重新路由到当前页面，页面是不进行刷新的 - 采用
window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验不好
那我们怎么做呢？
跟上面的原理差不多，我们只在控制路由的组件中写一个函数（使用v-if控制router-view的显示隐藏,这里的原理不作赘述），然后把这个函数传递给后代，然后在后代组件中调用这个方法即可刷新路由啦。
//app.vue
<router-view v-if="isShowRouter"/>
export default {
name: 'App',
provide() {
return {
reload: this.reload
}
},
data() {
return {
isShowRouter: true,
}
},
methods:{
reload() {
this.isShowRouter = false;
this.$nextTick(() => {
this.isShowRouter = true;
})
}
}
}//后代组件
export default {
inject: ['reload'],
}这里 provide 使用了函数传递给后代，然后后代调用这个函数，这种思路，也是可以做子后代向父组件传参通讯的思路了。这里的原理，和 event 事件订阅发布就很像了
ref / $refs
ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例，可以通过实例直接调用组件的方法或访问数据， 我们看一个ref 来访问组件的例子:
// 子组件 A.vue
export default {
data () {
return {
name: 'Vue.js'
}
},
methods: {
sayHello () {
console.log('hello')
}
}
}// 父组件 app.vue
<template>
<component-a ref="comA"></component-a>
</template>
<script>
export default {
mounted () {
const comA = this.$refs.comA;
console.log(comA.name); // Vue.js
comA.sayHello(); // hello
}
}
</script>ref 这种方式，就是获取子组件的实例，然后可以直接子组件的方法和访问操作data的数据，就是父组件控制子组件的一种方式，子组件想向父组件传参或操作，只能通过其他的方式了
eventBus
eventBus呢，其实原理就是 事件订阅发布，eventBus 又称为事件总线，在vue中可以使用它来作为沟通桥梁的概念, 就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件， 所以组件都可以通知其他组件。
这里我们可以直接使用 vue 自带的事件监听，也就是 on，我们来简单封装下：
- 首先需要创建一个事件总线并将其导出, 以便其他模块可以使用或者监听它.
新建一个 event-bus.js 文件
// event-bus.js import Vue from 'vue' export const EventBus = new Vue()
- 发生事件
假设你有两个组件: additionNum 和 showNum, 这两个组件可以是兄弟组件也可以是父子组件；这里我们以兄弟组件为例:
<template>
<div>
<show-num-com></show-num-com>
<addition-num-com></addition-num-com>
</div>
</template>
<script>
import showNumCom from './showNum.vue'
import additionNumCom from './additionNum.vue'
export default {
components: { showNumCom, additionNumCom }
}
</script>// addtionNum.vue 中发送事件
<template>
<div>
<button @click="additionHandle">+加法器</button>
</div>
</template>
<script>
import { EventBus } from './event-bus.js'
console.log(EventBus)
export default {
data() {
return {
num: 1
}
},
methods: {
additionHandle() {
EventBus.$emit('addition', {
num: this.num++
})
}
}
}
</script>- 接收事件
// showNum.vue 中接收事件
<template>
<div>计算和: {{count}}</div>
</template>
<script>
import { EventBus } from './event-bus.js'
export default {
data() {
return {
count: 0
}
},
mounted() {
EventBus.$on('addition', param => {
this.count = this.count + param.num;
})
}
}
</script>这样就实现了在组件addtionNum.vue中点击相加按钮, 在showNum.vue中利用传递来的 num 展示求和的结果.
- 移除事件监听者
如果想移除事件的监听, 可以像下面这样操作:
import { eventBus } from 'event-bus.js'
EventBus.$off('addition')自己封装一套 eventBus
这里使用自己封装一套eventBus也行，方便自己想干啥就干啥， 下面贴封装好的一套给大家
/* eslint-disable no-console */
// 事件映射表
let eventMap = {}
/**
* 监听事件
* @param {string} eventName 事件名
* @param {function} listener 回调函数
* @param {object} instance 注册事件的实例
*/
function on(eventName, listener, instance) {
eventMap[eventName] = eventMap[eventName] || []
eventMap[eventName].push({
listener,
instance,
})
}
// 监听事件，只执行一次
function once(eventName, listener, instance) {
eventMap[eventName] = eventMap[eventName] || []
eventMap[eventName].push({
listener,
instance,
once: true,
})
}
// 解除事件监听
function off(eventName, listener) {
// 解除所有事件监听
if (!eventName) {
eventMap = {}
return
}
// 没有对应事件
if (!eventMap[eventName]) {
return
}
// 解除某事件监听
eventMap[eventName].forEach((currentEvent, index) => {
if (currentEvent.listener === listener) {
eventMap[eventName].splice(index, 1)
}
})
}
// 发送事件，执行对应响应函数
function emit(eventName, ...args) {
if (!eventMap[eventName]) {
return
}
eventMap[eventName].forEach((currentEvent, index) => {
currentEvent.listener(...args)
if (currentEvent.once) {
eventMap[eventName].splice(index, 1)
}
})
}
// 显示当前注册的事件，代码优化时使用
function showEventMap(targetEventName) {
if (targetEventName) { // 查看具体某个事件的监听情况
eventMap[targetEventName].forEach(eventItem => {
console.log(targetEventName, eventItem.instance, eventItem.listener)
})
} else { // 查看所以事件的监听情况
Object.keys(eventMap).forEach(eventName => {
eventMap[eventName].forEach(eventItem => {
console.log(eventName, eventItem.instance, eventItem.listener)
})
})
}
}
// 提供 vue mixin 方法，在 beforeDestroy 自动注销事件监听
export const mixin = {
created() {
// 重载 on 函数，收集本组件监听的事件，待消除时，销毁事件监听
this.$eventListenerList = []
this.$event = { off, once, emit, showEventMap }
this.$event.on = (eventName, listener) => {
this.$eventListenerList.push({ eventName, listener })
on(eventName, listener)
}
},
// 消除组件时，自动销毁事件监听
beforeDestroy() {
this.$eventListenerList.forEach(currentEvent => {
off(currentEvent.eventName, currentEvent.listener)
})
},
}
export default { on, off, once, emit, showEventMap }如何使用呢，只需在 项目的 main.js, 引入 ，然后 Vue.mixin 即可，如下:
// main.js
import Vue from 'vue'
import { mixin as eventMixin } from '@/event/index'
Vue.mixin(eventMixin)在vue项目其他文件，就可以直接 this.$event.on this.$event.$emit 如下：
this.$event.on('test', (v) => { console.log(v) }) this.$event.$emit('test', 1)还顺便封装了个mixin, 好处呢，就是在vue页面监听事件后，页面销毁后，也自动销毁了事件监听
Vuex
Vuex介绍
Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化.Vuex解决了多个视图依赖于同一状态和来自不同视图的行为需要变更同一状态的问题，将开发者的精力聚焦于数据的更新而不是数据在组件之间的传递上
Vuex各个模块
-
state：用于数据的存储，是store中的唯一数据源 -
getters：如vue中的计算属性一样，基于state数据的二次包装，常用于数据的筛选和多个数据的相关性计算 -
mutations：类似函数，改变state数据的唯一途径，且不能用于处理异步事件 -
actions：类似于mutation，用于提交mutation来改变状态，而不直接变更状态，可以包含任意异步操作 -
modules：类似于命名空间，用于项目中将各个模块的状态分开定义和操作，便于维护
Vuex实例应用
这里我们先新建 store文件夹， 对Vuex进行一些封装处理
在 store 文件夹下添加 index.js 文件
// index.js
// 自动挂载指定目录下的store
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let modules = {}
// @/store/module 目录下的文件自动挂载为 store 模块
const subModuleList = require.context('@/store/modules', false, /.js$/)
subModuleList.keys().forEach(subRouter => {
const moduleName = subRouter.substring(2, subRouter.length - 3)
modules[moduleName] = subModuleList(subRouter).default
})
export default new Vuex.Store({
state: {},
mutations: {},
actions: {},
modules
})在 store 文件夹下添加 module 文件夹，在module文件夹再新建 user.js 文件
// user.js
import user from '@/utils/user.js'
import userApi from '@/apis/user'
import { OPEN_ACCOUNT_STAGE, STAGE_STATUS } from '@/constant'
let getUserPromise = null
export default {
namespaced: true,
state() {
return {
userInfo: null, // 用户信息
isLogined: !!user.getToken(), // 是否已经登录
}
},
mutations: {
// 更新用户信息
updateUser(state, payload) {
state.isLogined = !!payload
state.userInfo = payload
},
},
actions: {
// 获取当前用户信息
async getUserInfo(context, payload) {
// forceUpdate 表示是否强制更新
if (context.state.userInfo && !payload?.forceUpdate) {
return context.state.userInfo
}
if (!getUserPromise || payload?.forceUpdate) {
getUserPromise = userApi.getUserInfo()
}
// 获取用户信息
try {
const userInfo = await getUserPromise
context.commit('updateUser', userInfo)
} finally {
getUserPromise = null
}
return context.state.userInfo
},
// 登出
async logout(context, payload = {}) {
// 是否手动退出
const { manual } = payload
if (manual) {
await userApi.postLogout()
}
user.clearToken()
context.commit('updateUser', null)
},
}
}然后在项目的 main.js 文件中引入
import Vue from 'vue'
import App from '@/app.vue'
import { router } from '@/router'
import store from '@/store/index'
const vue = new Vue({
el: '#app',
name: 'root',
router,
store,
render: h => h(App),
})封装的很愉快了，然后就正常操作即可。
this.$store.state.user.isLogined
this.$store.state.user.userInfo
this.$store.commit('user/updateUser', {})
await this.$store.dispatch('user/logout', { manual: true })localStorage / sessionStorage
这种通信比较简单,缺点是数据和状态比较混乱,不太容易维护。
- 通过
window.localStorage.getItem(key)获取数据 - 通过
window.localStorage.setItem(key,value)存储数据
注意用JSON.parse() / JSON.stringify() 做数据格式转换， localStorage / sessionStorage可以结合vuex, 实现数据的持久保存,同时使用vuex解决数据和状态混乱问题.
自己实现简单的 Store 模式
对于小型的项目，通信十分简单，这时使用 Vuex 反而会显得冗余和繁琐，这种情况最好不要使用 Vuex，可以自己在项目中实现简单的 Store。
// store.js
const store = {
debug: true,
state: {
author: 'yushihu!'
},
setAuthorAction (newValue) {
if (this.debug) console.log('setAuthorAction triggered with', newValue)
this.state.author = newValue
},
deleteAuthorAction () {
if (this.debug) console.log('deleteAuthorAction triggered')
this.state.author = ''
}
}
export default store上面代码原理就是，store.js文件暴露出一个对象 store，通过引入 store.js 文件 各个页面来共同维护这个store对象
和 Vuex 一样，store 中 state 的改变都由 store 内部的 action 来触发，并且能够通过 console.log() 打印触发的痕迹。这种方式十分适合在不需要使用 Vuex 的小项目中应用。
与 $root 访问根实例的方法相比，这种集中式状态管理的方式能够在调试过程中，通过 console.log() 记录来确定当前变化是如何触发的，更容易定位问题。
通过 $root 访问根实例
通过 $root，任何组件都可以获取当前组件树的根 Vue 实例，通过维护根实例上的 data，就可以实现组件间的数据共享。
//main.js 根实例
new Vue({
el: '#app',
store,
router,
// 根实例的 data 属性，维护通用的数据
data: function () {
return {
author: ''
}
},
components: { App },
template: '<App/>',
});
<!--组件A-->
<script>
export default {
created() {
this.$root.author = '于是乎'
}
}
</script>
<!--组件B-->
<template>
<div><span>本文作者</span>{{ $root.author }}</div>
</template>注意：通过这种方式，虽然可以实现通信，但在应用的任何部分，任何时间发生的任何数据变化，都不会留下变更的记录，这对于稍复杂的应用来说，调试是致命的，不建议在实际应用中使用。
listeners
现在我们来讨论一种情况， 我们一开始给出的组件关系图中A组件与D组件是隔代关系， 那它们之前进行通信有哪些方式呢？
- 使用
props绑定来进行一级一级的信息传递, 如果D组件中状态改变需要传递数据给A, 使用事件系统一级级往上传递 - 使用
eventBus,这种情况下还是比较适合使用, 但是碰到多人合作开发时,代码维护性较低, 可读性也低 - 使用
Vuex来进行数据管理, 但是如果仅仅是传递数据, 而不做中间处理,使用Vuex处理感觉有点大材小用了.
所以就有了 $attrs / $listeners ，通常配合 inheritAttrs 一起使用。
默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。
通过设置 inheritAttrs 到 false，这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例 property $attrs 可以让这些 attribute 生效，且可以通过 v-bind 显性的绑定到非根元素上。
注意：这个选项不影响 class 和 style 绑定。
上面是官方描述：还是很难懂。
简单的说就是
-
inheritAttrs：true时继承除props之外的所有属性 -
inheritAttrs：false只继承class 和 style属性
$attrs：包含了父作用域中不被认为 (且不预期为) props 的特性绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。当一个组件没有声明任何 props 时，它包含所有父作用域的绑定 (class 和 style 除外)。
$listeners：包含了父作用域中的 (不含 .native 修饰符) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件。它是一个对象，里面包含了作用在这个组件上的所有事件监听器，相当于子组件继承了父组件的事件。
讲了这么多文字概念，我们还是来看代码例子吧：
新建一个 father.vue 组件
<template>
<child :name="name" :age="age" :infoObj="infoObj" @updateInfo="updateInfo" @delInfo="delInfo" />
</template>
<script>
import Child from '../components/child.vue'
export default {
name: 'father',
components: { Child },
data () {
return {
name: '阿离王',
age: 22,
infoObj: {
from: '广东',
job: 'policeman',
hobby: ['reading', 'writing', 'skating']
}
}
},
methods: {
updateInfo() {
console.log('update info');
},
delInfo() {
console.log('delete info');
}
}
}
</script>child.vue 组件：
<template>
<!-- 通过 $listeners 将父作用域中的事件，传入 grandSon 组件，使其可以获取到 father 中的事件 -->
<grand-son :height="height" :weight="weight" @addInfo="addInfo" v-bind="$attrs" v-on="$listeners" />
</template>
<script>
import GrandSon from '../components/grandSon.vue'
export default {
name: 'child',
components: { GrandSon },
props: ['name'],
data() {
return {
height: '180cm',
weight: '70kg'
};
},
created() {
console.log(this.$attrs);
// 结果：age, infoObj, 因为父组件共传来name, age, infoObj三个值，由于name被 props接收了，所以只有age, infoObj属性
console.log(this.$listeners); // updateInfo: f, delInfo: f
},
methods: {
addInfo () {
console.log('add info')
}
}
}
</script>grandSon.vue 组件
<template>
<div>
{{ $attrs }} --- {{ $listeners }}
<div>
</template>
<script>
export default {
props: ['weight'],
created() {
console.log(this.$attrs); // age, infoObj, height
console.log(this.$listeners) // updateInfo: f, delInfo: f, addInfo: f
this.$emit('updateInfo') // 可以触发 father 组件中的updateInfo函数
}
}
</script>这种方式的传值虽然说不常用，感觉可读性不是很好。但其对于组件层级嵌套比较深，使用props会很繁琐，或者项目比较小，不太适合使用 Vuex 的时候，可以考虑用它
总结
常见使用场景可以分为三类:
- 父子组件通信:
props、$parent / $children、provide / inject、ref \ $refs、$attrs / $listeners - 兄弟组件通信:
eventBus、vuex、自己实现简单的 Store 模式 - 跨级通信:
eventBus、Vuex、自己实现简单的 Store 模式、provide / inject、$attrs / $listeners
更多编程相关知识，请访问：编程入门！！
以上是vue組件間怎麼進行通訊？ 12種通信方式分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！