In the normal development process, communication between father-son/sibling components is definitely encountered, so here is a summary of the communication props of 6 Vue components / $e$emit / Vuex$attrs / $ listeners

1. $parent / $children with ref

2. provide / inject

##Preface

As shown in the figure above, components A/B, B/C, and B/D are father-son relationships, and C/D is a brother relationship. So how to choose different communication methods according to different usage scenarios? So the premise is that we need to understand the functions and differences of different communication methods.

1. props / $emit

This is one of the methods we usually use more often. Parent component A passes data to child component B through the props parameter. Component B sends an event (carrying parameter data) to component A through $emit. Component A listens to the event triggered by $emit and obtains the data sent by B to A. Let’s explain its implementation steps in detail:

1: Parent component passes value to child component

// App.vue 父组件  

2: Child component passes value to parent component (Through events)

// 子组件  

2. $emit / $on

This method uses an instance similar to App.vue as a module Event Center, use it to trigger and listen for events. If you put it in App.vue, you can implement communication in any component. However, this method is not easy to maintain when the project is relatively large.

For example: Suppose there are 4 components now, Home.vue and A/B/C components. These three components AB are sibling components. Home.vue is equivalent to the parent component creating an empty Vue instance. Mount the communication event on the instance -

D.js import Vue from 'vue'export default new Vue()

// 我们可以在router-view中监听change事件，也可以在mounted方法中监听 // home.vue

// A组件  

// B组件  

// C组件  

We can know from the above that the $emit event of A/B is monitored in the mounted event of the C component and the parameters passed by it are obtained ( Since we are not sure when the event is triggered, we usually listen in mounted / created)

3. Vuex

Vuex is a state management mode. It uses centralized storage to manage the state of all components of the application, and uses corresponding rules to ensure that the state changes in a predictable way. The core of the Vuex application is the store (warehouse, a container). The store contains most of the state in your application;

This part will not be introduced in detail, the official document is very detailed vuex.vuejs .org/zh/guide/st…

Four. $attrs / $listeners

As shown in the picture above, this is A multi-level component nesting, how do the A/C components communicate? We can think of the following solutions now:

Use Vuex for data management, but the problem with using vuex is that if the project is relatively small and there is less shared state between components, then use vuex is like killing a chicken with a knife.
1. Use B component as a transfer station. When A component needs to pass information to C component, B accepts the information of A component and then uses props to pass it to C component. However, if there are too many nested components, it will The code is cumbersome and code maintenance is difficult; if the change of state in C needs to be passed to A, the event system must be used to pass it up level by level.

In Vue2.4, in order to solve this requirement, attrs and listeners were introduced, and the inheritAttrs option was added. (As shown in the picture below)

The role of $attrs, in some cases needs to be used in conjunction with inheritAttrs

There are 4 components: App.vue / child1.vue / child2.vue / child3.vue, these four components are nested in sequence.

// App.vue  

// child1.vue  

// child2.vue  

// child3.vue  

Let’s take a look at the specific display effect:

And how to use $listeners, the official document says: Contains the content in the parent scope (without .native decorator) v-on event listener. It can be passed into inner components via v-on="$listeners" - very useful when creating higher level components! From the literal meaning, it should be to add a listening event to the parent component that needs to accept the value? Not much to say, the code

is still 3 components nested in sequence

 复制代码

 复制代码

// child3.vue  复制代码

这里的结果是，当我们点击 child3 组件的 child3 文字，触发 startUpRocket 事件，child1 组件就可以接收到，并触发 reciveRocket 打印结果如下：

> reciveRocket success > startUpRocket

五. $parent / $children 与 ref

• ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
• $parent / $children：访问父 / 子实例

这两种方式都是直接得到组件实例，使用后可以直接调用组件的方法或访问数据。

我们先来看个用 ref 来访问组件的：

// child1子组件 export default { data() { return { title: 'Vue.js' }; }, methods: { sayHello() { console.log('child1!!'); } } };

// 父组件  

六. provide/inject

provide/inject 是 Vue2.2.0 新增 API,这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。如果你熟悉 React，这与 React 的上下文特性很相似。

provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

由于自己对这部分的内容理解不是很深刻，所以感兴趣的可以前往官方文档查看： cn.vuejs.org/v2/api/#pro…

总结

常见使用场景可以分为三类：

1. 父子通信：props / $emit；$parent / $children；$attrs/$listeners；provide / inject API； ref
2. 兄弟通信：Vuex
3. 跨级通信：Vuex；$attrs/$listeners；provide / inject API
   4.接下来我还会在我的裙里用视频讲解的方式给大家讲解【以下图中的内容】有兴趣的可以来我的扣扣裙 519293536 免费交流学习，我都会尽力帮大家哦

4. 

推荐教程：《JS教程》

The above is the detailed content of Six ways to communicate with Vue components. For more information, please follow other related articles on the PHP Chinese website!