vue组件通信大全

3次阅读

共计 3210 个字符，预计需要花费 9 分钟才能阅读完成。

vue 组件通信形式很多同学会说我晓得，这个简略，props 传值，$emit 回传，再不行就 vuex。但实际上 vue 组件通信远远不止这些，并不是层级一多就要用 vuex，一个我的项目就要隔多级传几个动态参数，你说我用 vuex，我想这就是杀鸡用了宰牛刀，明天就来说一下具体有多少种形式，并且如何利用。

组件通信罕用形式

1、props/$emit。
2、event。
3、vuex。

自定义事件
1. 边界状况

4、$parent。
5、$root。
6、$children。
7、$refs。
8、provide/inject。

2. 非 prop 个性

9、$attrs。
10、$listeners。

1.props/$emit
props 传值非常简单，这个是最最罕用的，我简略写下例子。

父组件给子组件传值

// parent 组件
<Parent msg="Welcome to vue props"/>

// child 外面通过 props 获取 msg
props: {msg: String}

子组件传值给父组件, 应用 $emit

// child 外面调用 $emit, 第一个参数是办法名，前面都是参数
this.$emit('add', good) 

// parent，$emit 会触发父组件 add 办法
<Parent @add="parentAdd($event)" />

2.event 事件总线
后面说到的 props 和 /$emit 父子组件通信，他们存在引入与被引入的关系，如果不存在这种关系咱们该怎么办呢？
这时咱们经常会用到事件总线或者 vuex 的形式。

首先在 main.js 文件中通过 vue 原型属性初始化 EventBus，
这种形式初始化的是一个全局事件总线。

import Vue from 'vue'
import App from './App.vue'

// 事件总线
Vue.prototype.$bus = new Vue()

new Vue({render: h => h(App),
}).$mount('#app')

在组件 1 中发送信息

// 利用事件总线发送事件
this.$bus.$emit('event-from-component1', 'some msg from component1')

在组件 2 中监听承受信息

this.$bus.$on('event-from-component1', msg => {console.log('component2:', msg);
});

这时只有在组件 1 中触发 $bus.$emit 的办法，组件 2 中 $bus.$on 办法就会调用，控制台就会输入：

3.vuex

创立惟一的全局数据管理者 store，通过它治理数据并告诉组件状态变更。
vuex 的弱小这里就不赘述了，vuex 内容比拟多也不是本文的主题，这里就不细讲了，不相熟的同学先去看下官网：https://vuex.vuejs.org/zh/guide

4.$parent
兄弟组件间接能够通过独特的先人搭桥联通，$parent 和 $root 都能够做到。

// brother1 中收回办法
this.$parent.$emit('event-from-brother1', 'some msg from brother1')`

// brother2 中接管办法
this.$parent.$on('event-from-brother1', msg => {console.log('brother2:', msg);
});

这时触发 brother1 中的办法，控制台就会显示：

这是兄弟组件通信的办法，咱们也能够通过 $parent 从子组件调用父组件的办法。

// parent 外面 methods 定义了一个办法
methods: {fatherMethod() {console.log('我是你爹');
      }
    }
    
// children 子组件外面调用父组件办法
this.$parent.fatherMethod()

当 $parent.fatherMethod()办法在子组件被调用控制台便会打出：我是你爹

5.$root

$root 和下面 parent 相似，这里就不赘述，具体请移步官网。

6.$children

父组件能够通过 $children 拜访子组件实现父子通信, 然而父组件可能含有多个子组件，所以要辨别开

this.$children[index].xx = 'xxx'

然而有一点须要留神 $children 实际上不能保障子元素的程序，也不是响应式的。
因为 $children 是依据你页面加载组件的程序去确定子组件在 $children数组中的程序。
如果 A 组件在 B 组件先加载，那么 A 组件的下标就是 0，B 组件的下标就是 1。
如果有动静组件很容易出错，所以咱们并不倡议应用。
然而咱们罕用的 $refs 就能够解决这个问题。

7.$refs
回去节点援用，也就是获取 dom

// dom 中引入
<div ref="tx" /> 

// 获取下面 div 的 dom 从而操作
this.$refs.tx

在父组件中通过 ref 调用子组件的办法，这里就不会有 $children 的程序问题了，因为 ref 是一一对应的。

// 父组件
<Child2 ref="child2" msg="some message"></Child2>

// 子组件
methods: {sendToChild1() {console.log('我是父组件应用 ref 调用的办法')
  }
},

// 在父组件中调用子组件办法 sendToChild1
`this.$refs.child2.sendToChild1()`

8.provide/inject
可能很好的跨层级通信。官网也做比拟具体的阐明：https://cn.vuejs.org/v2/api/#…。
这个办法其实也挺好用的，然而很多同学并没有用过，可能都不是很分明。
上面咱们来具体说一下：

// 祖辈组件中提供了一个变量，这时咱们应用 provide 办法注入
provide() {
  return {father: 'father'}
},
// 这时咱们须要在某个后辈元素中获取这个 father 变量
// 注入之后咱们就能够在该后辈组件中应用变量 father 了
inject: ['father']

// inject 另外一种写法
// 这时咱们须要对变量重命名，同时能够设置默认值
inject: {
  bar1: {
    from: 'father',
    default: 'barrrrrrrr'
  }
},

咱们也能够把注入值放入咱们该后辈元素的 data 中去应用，provide/inject 根本用法就是这样的。

9.$attrs
$attrs蕴含了父作用域中不作为 prop 被辨认 (且获取) 的个性绑定 (class 和 style 除外)。
当一个组件没有申明任何 prop 时，这里会蕴含所有父作用域的绑定 (class 和 style 除外)，并且能够通过 v- bind=”$attrs” 传入外部组件——在创立高级别的组件时十分有用。

// 爷爷组件中给父亲组件注入信息
<Parent msg="msg" />

// 父亲组件，咱们须要在父亲组件中绑定 $attr 以便于孙子组件获取信息
<Children v-bind="$attrs" />

// 孙子组件：在 props 中没有申明 msg, 这时子组件仍然可能收到信息
<div> {{$attrs.msg}}</div>

这时孙子组件就能够获取 msg 的信息了，这里其实都是跨层级通信的。
10.$listeners
如果咱们须要从孙子组件调用爷爷组件的办法，实现跨层级通信的话，能够应用到 $listeners。

// 爷爷组件
<Parent msg="msg" @foo="onFoo"/>

// 爷爷组件 methods 设置办法
onFoo() {console.log('msg from Children');
}

// 父亲组件，绑定 $listeners
<Children v-bind="$attrs" v-on="$listeners" />

// 孙子组件：调用 foo 办法
this.$emit('foo')

以上内容只是自己的学习总结，紧供参考。

正文完