This is the 4th day of my participation in the August More Text Challenge

In the process of component communication of Vue, in addition to the parent and child component communication mentioned before, this paper explains the way of value transmission between non-parent and child components in Vue project

Event bus

An empty vUE instance can be used as the Central Line of events. For non-parent components to communicate with each other, a common instance is required to send data parameters using $EMIT and $ON

Public instance file bus.js, as the public CNC central bus

import Vue from "vue";
export default new Vue();
Copy the code

One component A

import Bus from '.. /bus.js'; Export default {name: 'aaa', data () {return {value: 'aaa. Vue component! Bus.$emit(' TXT ',this.value); }}}Copy the code

A component B

import Bus from '.. /bus.js'; export default { name: 'BBB ', data () {return {value: }}, mounted:function(){Bus.$on(' TXT ',function(val){this. }}Copy the code

In this way, the value of the first component can be obtained from the third party bus.js between two components that have no parent-child relationship

Compared with the data interaction between siblings and parent components, the communication between siblings is somewhat similar to the transmission of values from child components to parent components. In fact, their communication principles are the same

For example, the child sends the value to the parent in the form of emit and emit and emit and on. However, there is no eventBus. In fact, the parent component acts as the eventBus

$attrs/listeners

The $attrs and Listeners methods are used for problems of transferring values between multiple levels of components

It is easy to pass values in the secondary encapsulation of some components, with component A passing to component C, using component B as bridge A-B-C

A component A (app.vue

<template> <div id="app"> <child1 :p-child1="child1" :p-child2="child2" v-on:test1="onTest1" v-on:test2="onTest2"> </div> </template> <script> import child1 from './ child1. vue'; export default { data () { return {}; }, components: { Child1 }, methods: { onTest1 () { console.log('test1 running... '); }, onTest2 () { console.log('test2 running'); }}}; </script>Copy the code

A component B (child1

<template> <div class="child-1"> <p>in child1:</p> <p>props: {{pChild1}}</p> <p>$attrs: {{$attrs}}</p> <hr> < listeners 2 v-bind="$attrs" v-on="$listeners"></child2 $listeners are bound to the $listeners attribute via v-bind, </div> </template> <script> import Child2 from './ child2.vue '; export default { props: ['pChild1'], data () { return {}; }, inheritAttrs: false, components: { Child2 }, mounted () { this.$emit('test1'); }}; </script>Copy the code

A component C

<template> <div class="child-2"> <p>in child2:</p> <p>props: {{pChild2}}</p> <p>$attrs: {{$attrs}}</p> <hr> </div> </template> <script> export default { props: ['pChild2'], data () { return {}; $emit($emit('test2')); // If we want to use this, we can set access_attribute to false. }}; </script>Copy the code

If component C has objects accepted by the props property, objects passed by component A are automatically filtered out

Vuex

For more complex cases, Vue also provides a more complex state management mode, Vuex

Attachment: Vuex Usage