How to operate $emit and $on in vue to communicate with parent-child and sibling components

This time I will show you how to operate $emit and $on parent-child and sibling components in vue to communicate, and how to operate $emit and $on parent-child and sibling components in vue.What are the precautions, below This is a practical case, let’s take a look at it.

There are three main transmission methods:

1. Communication from parent component to child component

2. Communication from child component to parent component

3. Communication between sibling components

1. Parent component passes value to child component

Parent component passes values to child component using props

//父组件：parent.vue   //子组件：child.vue  

2. Communication from child component to parent component

Use$emit(eventname,option)Triggerevent,

Parameter 1: Customize the event name, written in lowercase or connected with -, such as event, event-name cannot be written in camel case (eventName)

The sub-component passes the value to the parent component and can be used in the sub-component The value of the event triggered by $emit is passed out, and the parent component obtains the data through event monitoring.

However, there is a problem here.

1. It is the child component that actively transmits data to the parent component. The parent component listens and receives (it is determined by the operation in the child component when to pass the value)

2. Or it is the parent component that determines when the child component passes the value to the parent component, and then listens and receives (it is determined by the operation in the parent component) When to pass the value)

Both cases exist

2.1: $meit event trigger, customized through event trigger inside sub-component Event $emit

2.2: The $meit event is triggered. The custom event $emit

can be triggered by the event of the parent component operating the child component (ref). The first case:

//父组件：parent.vue   //子组件：child.vue  

Second case:

//父组件：parent.vue   //子组件：child.vue  

Comparing the two situations, the difference lies in whether the $emit custom event is triggered by a parent component or a child component To trigger

The first way is to define a click event in the child component to trigger the custom event $emit, and then listen to it in the parent component

The second way is to use it in the parent component For the first click event, obtain the instance method through refs in the component to directly trigger the event, and then listen in the parent component

3. Communication between sibling components

(1) , Transfer data between brothers through events

(2) Create a new Vue instance so that each brother shares the same event mechanism. (Key points)

(3) When passing data, $emit (method name, passed data) is triggered through events.

(4) The data receiving party triggers the event $on (method name, callback (received data)) in the mounted() hook function (mounted instance). At this time, this in the callback function Changes have been made to use arrow functions.

//建立一个空的Vue实例,将通信事件挂载在该实例上 //emptyVue.js import Vue from 'vue' export default new Vue() //兄弟组件a:childa.vue   //兄弟组件b:childb.vue   //父组件：parent.vue  

At this point, the component communication and value transfer in Vue can basically be solved, but for large and complex projects, it is recommended to use vuex state management to be more suitable....

I believe I have read this article You have mastered the case method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to optimize js async function

How to use less in angular6

The above is the detailed content of How to operate $emit and $on in vue to communicate with parent-child and sibling components. For more information, please follow other related articles on the PHP Chinese website!