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

Source: Internet
Author: User
Tags emit
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.


<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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.