Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities

preface

In the previous article we talked about the communication relationship between the props, emit/emit/emit/ ON, and vuex components. This said following the last us attrs/attrs/attrs/listeners, dojo.provide/injedt, parent/parent/parent/children and an article on the ref: vue inter-component communication (summary) on six ways

First, Vue component communication after three?

Attrs/attrs/attrs/listeners, dojo.provide/injedt, parent/parent/parent/children and ref

Four,
$attrs /$listeners

1. Introduction

When multi-level component nesting needs to pass data, the common method used is through VUEX. But if you just transfer data without intermediate processing, using VUEX processing is a bit overqualified. An alternative approach to this is provided in Version 2.4 of Vue2.4, where all parent-scoped bindings (except class and style) are included when a component does not declare any prop, and the internal component can be passed in via v-bind=”$attrs”. Usually used in conjunction with the interitAttrs option.

2. sample code

The code is as follows (example) :

// demo.vue
<template>
<div>
<child-com:foo="foo":boo="boo":coo="coo":doo="doo"></child-com>
</div>
</tempalte>
<script>
const childCom = ()=> import('./childCom1.vue')
export default {
data () {
return {
foo: 'Hello World! ',
boo: 'Hello Javascript! ',
coo: 'Hello Vue',
doo: 'Last'
}
},
components: { childCom }
}
</script>
// childCom1.vue

<template>
<div>
<p>foo: {{ foo }}</p>
<p>attrs: {{ $attrs }}</p>
<child-com2 v-bind="$attrs"></child-com2>
</div>
</template>
<script>
const childCom2 = ()=> import('./childCom2.vue')
export default {
props: ['foo'].// foo is bound as the props property
inheritAttrs: false,
created () {
console.log(this.$attrs) // { boo: 'Hello Javascript! ', coo: 'Hello Vue', doo: 'Last' }
}
}
</script>
// childCom2.vue
<template>
<div>
<p>boo: {{ boo }}</p>
<p>attrs: {{ $attrs }}</p>
<child-com3 v-bind="$attrs"></child-com3>
</div>
</template>
<script>
const childCom3 = ()=> import('./childCom3.vue')
export default {
props: ['boo'] Boo is bound as the props property
inheritAttrs: false,
created () {
console.log(this.$attrs) // { coo: 'Hello Vue', doo: 'Last' }
}
}
</script>
Copy the code

Attrs represents an object with no inherited data in the format of attribute name: attribute value. Vue2.4 provides attrs for objects with no inherited data in the format {attribute name: attribute value}. Vue2.4 provides attrs for objects with no inherited data in the form of attribute name: attribute value. Vue2.4 provides attrs, $Listeners to communicate data and events, making it easier to communicate across components

Five, the dojo.provide/inject

1. Introduction

Vue2.2.0 new API, this pair of options need to be used together to allow an ancestor component to inject a dependency to all of its descendants, regardless of component level, for as long as the upstream and downstream relationship is established. In a nutshell: Ancestor components provide variables through providers, and descendant components inject variables through inject

2. sample code

The code is as follows (example) :

Suppose there are two components: A.vue and B.vue, and B is A child of A// A.vue
export default {
provide: {
name: 'Boat on the waves'}}// B.vue
export default {
inject: ['name'],
mounted () {
console.log(this.name); // A boat on the waves}}Copy the code

As you can see, in a. vue, we set a provide: name, which provides the name variable to all its children. In b. vue, the name variable provided from component A is injected. In component B, the name variable is directly accessed through this.name and its value is also injects. This is the core use of the provide/Inject API. Note that provide and Inject binding are not responsive. However, if you pass in a listening object, its object properties will still ring. So, if the name of a. ue is changed, this. Name of B. ue will not be changed.

Vi.
$parent /$Children with the ref

1. Introduction

Ref: If used on a normal DOM element, the reference refers to the DOM element; Parent /parent /parent /children: Access parent/child instance parent/child instance parent/parent /children: Access parent/child instance parent/child instance Let’s look at an example of accessing a component using a ref:

2. sample code

The code is as follows (example) :

// component-a subcomponent

export default { 

data () { 

return { 

title: 'Vue.js' 

}

},

methods: { 

sayHello () { 

window.alert('Hello'); }}}/ / the parent component

<template> 

<component-a ref="comA"></component-a> 

</template> 

<script> 

export default { 

mounted () { 

const comA = this.$refs.comA; 

console.log(comA.title); // Vue.js 

comA.sayHello(); / / window

}

}

</script> 
Copy the code

The downside of both methods, however, is that there is no way to communicate across levels or between siblings.

// parent.vue 

<component-a></component-a> 

<component-b></component-b> 

<component-b></component-b> 
Copy the code

We want to access the two Component-B components in component-A that reference it on the page (in this case parent. Vue), in which case we need to configure additional plug-ins or tools, such as Vuex and Bus solutions.

conclusion

The common usage scenarios can be divided into three types: parent-child communication: the parent transmits data to the child through props, and the child transmits data to the parent through events (emit). Can also communicate via parent/child chain (EMIT); Can also communicate via parent/child chain (EMIT); Parent / $children can also communicate (parent / $children); Ref can also access component instances; Provide/Inject API.

Brother communication: Bus; Vuex;

Cross-level communication: Bus; Vuex; Dojo.provide/inject API, attrs/attrs/attrs/listeners

The above is xiaobian to introduce six ways of communication between VUE components (the end), I hope to help you. , original is not easy, looking forward to your likes attention and forwarding comments 😜😜😜Copy the code