Detailed description of the solution for inter-component communication in Vue2, detailed description of vue2

Detailed description of the solution for inter-component communication in Vue2, detailed description of vue2

Preface

In Vue, components are the main content for modular development, and component communication is the soul of vue data-driven. The following article will introduce the communication between Vue2 components, let's not talk about the following. Let's take a look at the detailed introduction.

Component communication includes:Communication between parent and child components and between brother components. Communication between components is essential in component-based system construction.

Parent component --> child component

1. attribute settings

The key code of the parent component is as follows:

<template> <Child :child-msg="msg"></Child></template>

The key code of the sub-component is as follows:

export default { name: 'child', props: { child-msg: String }};

Child-msg is the extra property value that the parent component sets for the child component. The property value must be set to props in the child component. The child-msg variable can be directly used in the child component.

2. The child component calls the parent component.

Child components get the parent component through $ parent and get the top component through $ root.

Child component --> parent component

1. Send event/listener event

Send events in a function in the child component:

this.$emit('toparentevent', 'data');

Parent component listening event:

<Child :msg="msg" @toparentevent="todo()"></Child>

Toparentevent is the custom sending event name of the child component. In the parent component, @ toparentevent is the listening event, and todo is the processing method of the parent component.

2. The parent component directly obtains the attributes or methods of the Child component.

Name the child component to be called. Set the name to the value of the Child component ref attribute.

<! -- Child component. The ref value is the component reference name --> <child-component ref = "aName"> </child-component>

In the parent component, $ refs. component name is used to obtain the child component. In this way, you can call the attributes and methods of the Child component.

Var child = this. $ refs. aNamechild. Attribute child. Method ()

The parent component uses $ children to obtain all direct child components (the child components of the parent component are not directly child components ). Note that $ children does not guarantee the order or the response type.

Bus central communication

Currently, central communication is the best way to solve inter-sibling communication and inter-grandparent communication. It can also solve the communication between sub-components of parent components. For example:

Each component can define its own component to receive the message events of the external component, regardless of which component is sent. For the component that sends the event, you don't have to worry about how this event is actually sent to the components that I need to send.

Set Bus first

//bus.js import Vue from 'vue'export default new Vue();

Event listening in components:

import bus from '@/bus';export default { name: 'childa', methods: { }, created() { bus.$on('childa-message', function(data) { console.log('I get it'); }); }};

Send event components:

Import bus from '@/bus'; // execute the following action in the method bus. $ emit ('childa-message', this. data );

The Bus central communication solution is available in various cases, which is more convenient. The detailed internal principles will be updated later.

Summary

The above is all about this article. I hope this article will help you learn or use vue. If you have any questions, please leave a message, thank you for your support.