欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue组件间通信的6种方式

程序员文章站 2022-05-15 18:38:54
...

1. props/$emit 父子组件通信

子组件通过 props接收父级传递的参数,通过$emit触发父级方法,传递参数

子组件:
<input type="text" :value="title">
<button @click="addList">添加</button>
...
props: ['title'],

...
addList () {
      this.$emit('add', this.title);
...
}

父级通过 在子组件上 @方法名 监听事件

父组件:
<Input @add="addHandler" />

addHandler (title) {
    console.log(title); // 子组件传递的值
}

2. 使用ref 和 $parent / $children 父子组件通信

父组件取子组件的值
1. 使用$children

this.title = this.$children[0].title;

2. 使用$ref获取指定子组件的值

<Input ref="childInput" />
this.title = this.$refs.childInput.title;

子组件取父组件的值

// 子组件中
this.msg = this.$parent.msg;

3.使用EventBus  兄弟组件通信

其实event就是个空的vue实例,使用event.$on监听自定义事件,evevt.$emit触发,event.$off解除绑定

event.js

import Vue from 'vue';

export default new Vue();

兄弟1-传值方

import event from '../../utils/event.js'

// 兄弟组件通信,触发自定义事件
event.$emit('logTitle', this.title);

兄弟2-接收值方

import event from '../../utils/event.js'

// 绑定自定义事件
event.$on('logTitle', this.consoleTitle);
...
consoleTitle(title) {
      console.log('兄弟组件间通信', title);
}
...

beforeDestroy() {
      // 注意销毁周期解绑自定义事件
      event.$off('logTitle', this.consoleTitle);
}

3.$attrs / $listeners 适用于 隔代组件通信

 

$attrs:包含了父作用域中不被prop所识别(且获取)的特性绑定(class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定(class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用

$listeners:包含了父作用域中的(不含.native 修饰器的)v-on 事件监听器,它可以通过 v-on="$listeners" 传入内部组件

 

4.provide / inject 适用于 隔代组件通信

 

祖先组件通过 provider 来提供变量,然后在子孙组件中通过 inject 来注入变量,provide / inject API 主要解决了跨级组件间的通信问题,不过它的使用场景,主要是子组件获取上级组件的状态,跨级组件之间建立了一种主动提供与依赖注入的关系

3.6 Vuex 适用于 父子、隔代、兄弟组件通信

Vuex 是专为Vue.js应用程序开发的状态管理模式

关于vuex使用,详见 vuex 使用详解