How do I communicate between Vue and parent components? Four ways to communicate between Vue parent and child components

What this article brings to you is about how the Vue parent-child component communicates? Vue Parent-child communication between the four methods, there is a certain reference value, the need for friends can refer to, I hope to help you.

There are four ways in which parent-child communication is present:

1. Parent component passing data to child components
How does the parent component data pass to the subassembly? You can use the props property to implement
Parent component:

<parent> <child:child-msg= "MSG" ></child>//must be used here-instead of Hump </parent>data () {return {msg: [+] };}

Subcomponents receive data through props:
Mode 1:

Props: [' childmsg ']

Mode 2:

Props: {childmsg:array//This can specify the type that is passed in, and if the type is not correct, it warns}props: {childmsg: {type:array, default: [0,0,0]//To specify default value}}

This enables the parent component to pass data to the child component.

2. Subcomponents Communicate with parent components
So, what if the subcomponents want to change the data? This is not allowed in Vue, because Vue allows only one-way data transfer, when we can change the sub-component data by triggering a custom event to notify the parent component to change the data.

Binding custom Events using v-on
Each Vue instance implements the event interface (events interface), which is:
Using $on (EventName) to listen for events
Triggering events using $emit (eventName)

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

Sub-components:

<template> <div @click = "Up" ></div></template>methods: {up () {this. $emit (' Resultchange ', ' Hehe '); Actively triggering the Resultchange method, ' hehe ' is the data passed to the parent component}}

Parent component:

<div> <child @on-result-change= "mychanghandle": msg= "MSG" ></child>//Listen for Upup events triggered by sub-components and call the change method </div>methods: {mychanghandle (msg) {this.msg = msg;}}

Trigger events use the Camel-formatted custom event name, which can be used as a on-evnet-name in the parent component.

3. Communication between any components
How do I communicate if 2 components are not parent-child components? Communication can then be achieved through Eventhub.
The so-called Eventhub is to create an event hub, which is equivalent to a broker that can be used to pass events and receive events.
Use an empty Vue instance as the central event bus:

Let Hub = new Vue (); Create an event hub, and note that the hub should be placed in the global

Component 1 Trigger:

<div @click = "Eve" ></div>methods: {Eve () {Hub. $emit (' Change ', ' hehe ');//hub trigger Event}}

Component 2 Receive:

<div></div>created () {Hub. $on (' Change ', () = {//hub Receive event this.msg = ' hehe ';});}

4. $refs

Although there are props and events, it is sometimes necessary to access subcomponents directly in JavaScript. To do this, you can use 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: ' #parent '}) Access subcomponent var child = parent. $refs. Profile

When ref and V-for are used together, ref is an array or an object that contains the appropriate subcomponents.