How to implement communication between vue parent and child components-JS Tutorial-php.cn

This time I will show you how to implement communication between vue parent and child components, and what are theprecautions to implement communication between vue parent and child components. The following is a practical case, let's take a look.

Components are one of the most powerful features of vue.js, and the scopes of component instances are independent of each other, which means that data between different components cannot reference each other. Then how to communicate between components has become a key knowledge in Vue. This article will explain how to implement communication between parent and child components through the knowledge points of props, $ref and $emit.

Before talking about how to implement communication, let's first build two components father.vue and child.vue as the basis of the example.

//父组件

Copy after login

//子组件

Copy after login

The codes in these two parts are very clear. The parent component imports the child component through import and registers it in the components attribute. Then the child component can be embedded in the parent using the tag Components. The effect after running father.vue is as follows:

Example effect one

1. Communication through prop

The props option of the child component can receive data from the parent component. That's right, it can only be received. Props are one-way bound, that is, they can only be passed from the parent component to the child component, not the other way around. The delivery methods are also divided into two types:

(1) Static delivery

The child component declares a custom attribute through the props option, and then the parent component You can pass data to subcomponents through this attribute when nesting tags.

Copy after login

(2) Dynamic transfer

We already know that we can pass a static value to props as above, but in more cases we need dynamic data. This can be achieved using v-bind. By binding custom properties of props through v-bind, what is passed is not a static

string, it can be an expression, Boolean value, object, etc. any type of value.

Copy after login

The effect is like this:

Example effect two

2. Implemented through $ref Communication

The official explanation for ref is: ref is used to register reference information for elements or subcomponents. Reference information will be registered on the $refs object of the parent component.

Can’t understand, right? It's normal, I can't understand it either. How should that be understood? Take a look at my explanation:

If ref is used on a subcomponent, it points to the component instance, which can be understood as the index of the subcomponent. It is possible to obtain the subcomponent through $ref.
Properties and methodsdefined in.
If ref is used on an ordinary DOM element, the reference points to the DOM element. Through $ref, it is possible to obtain the attribute collection of the DOM and easily access the DOM element. The function is the same as JQ Selectors are similar.

How to achieve communication through $ref? Next, I will implement the function implemented by the above prop using $ref:

Copy after login

From the above code, we can find that through ref='msg', the instance of the subcomponent child can be pointed to $ref, and through .msg.getMessage() calls the getMessage method of the subcomponent and passes the parameters to the subcomponent. The following is the content printed by "console.log( this.$refs.msg);", which can give everyone a better understanding of what we get through ref:

console.log

The final effect is like this:

Example effect three

One more thing to add here is that prop and $ The difference between ref:

prop focuses on the transfer of data, it cannot call properties and methods in subcomponents. For usage scenarios such as customizing the title and content when creating an article component, prop is most suitable for use.
$ref 着重于索引，主要用来调用子组件里的属性和方法，其实并不擅长数据传递。而且ref用在dom元素的时候，能使到选择器的作用，这个功能比作为索引更常有用到。

3.通过$emit 实现通信

上面两种示例主要都是父组件向子组件通信，而通过$emit 实现子组件向父组件通信。

对于$emit官网上也是解释得很朦胧，我按我自己的理解是这样的: