Communication between Vue. js components and vue. js Components

Communication between Vue. js components and vue. js Components

Preface

Because Vue. js is very interested, and the technology stack that we usually work on is also Vue. js. I spent some time studying Vue over the past few months. js source code, and summarized and output.

The original address of the article: https://github.com/answershuto/learnVue.

In the learning process, added a Chinese annotation https://github.com/answershuto/learnVue/tree/master/vue-src for Vue, hope to be able to other friends who want to learn Vue source code to help.

There may be some deviations in understanding. You are welcome to mention issue and point out that you can learn and make progress together.

What is a Vue component?

Component is one of the most powerful functions of Vue. js. Components can expand HTML elements and encapsulate reusable code. At a higher level, a component is a custom element, and the Vue. js compiler adds special features to it. In some cases, components can also be in the form of native HTML elements and can be extended with the is feature.

Communication between Vue Components

Parent component communicates with child components

Method 1: props

With props, the parent component can use props to transmit data to the child component.

Parent component vue template father. vue

<template>  <child :msg="message"></child></template><script>import child from './child.vue';export default {  components: {    child  },  data () {    return {      message: 'father message';    }  }}</script>

Child. vue Template

<template>  <div>{{msg}}</div></template><script>export default {  props: {    msg: {      type: String,      required: true    }  }}</script>

Method 2 use $ children

You can use $ children to access child components in the parent component.

Child components communicate with parent Components

Method 1: Use vue events

The parent component transmits the event Method to the child component. The child component triggers the event through $ emit and calls back the event to the parent component.

Parent component vue template father. vue

<template>  <child @msgFunc="func"></child></template><script>import child from './child.vue';export default {  components: {    child  },  methods: {    func (msg) {      console.log(msg);    }  }}</script>

Child. vue Template

<Template> <button @ click = "handleClick"> click me </button> </template> <script> export default {props: {msg: {type: String, required: true }}, methods () {handleClick (){//........ this. $ emit ('msgfunc ') ;}}</script>

Method 2: Modify the data of the parent component by modifying the props passed by the parent component.

This method can only be used when the parent component passes a referenced variable, and the literal variable cannot achieve the corresponding effect. Because the consumption variable eventually points to the same memory address, both the data in the parent component and the data in the props obtained by the Child component, therefore, if the props data in the child component is modified, the data of the parent component is modified.

But it is not recommended to do this. It is not recommended to directly modify the value of props. If the data is used to display the changes, it is often put into data during actual development, you can use the event to return data to the parent component. In this way, components are independent and decoupled, so that data streams are not disordered due to the use of the same data set. data can be modified only by passing data through specific interfaces, the internal data status is managed by dedicated data.

Method 3: use $ parent

Use $ parent to access the data of the parent component.

Data transmission between non-Parent and Child components and brother Components

For non-parent-child communication, Vue officially recommends a Vue instance as the central event bus.

There is an internal event mechanism in Vue. You can refer to the source code.

The $ on method is used to listen to an event.

$ Emit is used to trigger an event.

/* Create a Vue instance as a central event */let event = new Vue ();/* listen to events */event. $ on ('eventname', (val) => {//...... do something});/* trigger event */event. $ emit ('eventname', 'This is a message. ');

Multi-layer parent-child component communication:

In Vue1.0, the $ broadcast and $ dispatch methods are implemented to broadcast (or distribute) to (or distribute) sub-components (or parent components) when an event is monitored and true is returned, the system continues to broadcast (or distribute) events to the Child widgets. However, this method has been removed from Vue2.0.

When I learned about ELE. Me's open-source Component Library element, I found that they re-implemented the broadcast and dispatch methods and introduced them in mixin mode, for details, refer to the element Component Library broadcast and dispatch. However, the implementation of these two methods is slightly different from that of Vue1.0. These two methods implement the function of broadcasting to child component events and distributing to multi-level parent component events. But it is not an event broadcast in a broad sense. It needs to specify a commentName to broadcast (distribute) events to the specified component name component.

In fact, the internal implementation of these two methods still uses $ parent and $ children to traverse the child node or query the parent node step by step to access the specified component name, call $ emit to trigger a specified event.

Complex single-page Application Data Management

When the application is complex enough, use vuex for data management.

Summary

The above section describes several Vue. js component communication methods. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!