How to communicate between Vue parent and child components? Four methods of communication between Vue parent and child components

What this article brings to you is about how to communicate between Vue parent and child components? The four methods of communication between Vue parent and child components have certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

There are currently four ways of parent-child communication:

1. Parent component passes data to child component
How does parent component data pass to child component? This can be achieved through props attributes
Parent component:

<parent> <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰</parent>data(){ return { msg: [1,2,3] };}

Child component receives data through props:
Method 1:

props: ['childMsg']

Method 2:

props: { childMsg: Array //这样可以指定传入的类型，如果类型不对，会警告}
props: { childMsg: { type: Array, default: [0,0,0] //这样可以指定默认的值 }}

In this way, the parent component transmits data to the child component.

2. The child component communicates with the parent component
So, what if the child component wants to change the data? ? This is not allowed in vue, because vue only allows one-way data transfer. At this time, we can notify the parent component to change the data by triggering a custom event, thereby achieving the purpose of changing the child component data.

Use v-on binds custom events
Each Vue instance implements the Events interface, that is:
Use $on(eventName) to listen for events
Use $emit(eventName) to trigger events

The parent component can directly use v-on where the child component is used to listen to the events triggered by the child component.

Subcomponent:

<template> <div 
@click="up"></div></template>methods: { up() { 
this.$emit(&#39;resultChange&#39;,&#39;hehe&#39;); //主动触发resultChange方法，&#39;hehe&#39;为向父组件传递的数据
 }}

Parent component:

<div> <child @on-result-change="mychangHandle" 
:msg="msg"></child> 
//监听子组件触发的upup事件,然后调用change方法</div>methods: { mychangHandle(msg) {
 this.msg = msg; }}

The triggered event uses a custom event name in camel case format, which can be used in the parent component to listen in the form of on-evnet-name.

3. Communication between any components
If the two components are not parent-child components, how do they communicate? At this time, communication can be achieved through eventHub.
The so-called eventHub is to create an event center, which is equivalent to a transfer station, and can be used to deliver events and receive events.
Use an empty Vue instance as the central event bus:

let Hub = new Vue(); //创建事件中心,注意Hub要放在全局

Component 1 triggers:

<div @click="eve"></div>methods: { eve() { Hub.$emit(&#39;change&#39;,&#39;hehe&#39;); //Hub触发事件 }}

Component 2 receives:

<div></div>created() { Hub.$on(&#39;change&#39;, () => { //Hub接收事件 this.msg = &#39;hehe&#39;; });}

4. $refs

Despite props and events , but sometimes you still need to access child components directly in JavaScript. You can do this by using ref to specify an index ID for the child component.

<div id="parent">
  <user-profile ref="profile"></user-profile>
</div>
var parent = new Vue({ el: &#39;#parent&#39; })
// 访问子组件
var child = parent.$refs.profile

When ref is used with v-for, ref is an array or object containing the corresponding subcomponents.

Related recommendations:

How to implement communication between vue parent and child components

Communication between vue child components and parent components Detailed explanation

The above is the detailed content of How to communicate between Vue parent and child components? Four methods of communication between Vue parent and child components. For more information, please follow other related articles on the PHP Chinese website!