Component Value Transfer and Communication in Common Methods of Vue Componentization

Related knowledge points

Parent component passes value to child component Child component passes value to parent component Value transfer between sibling components Value transmission between ancestors and descendants Passing values between any two components

Parent component passes value to child component

There are three basic methods for passing values from parent components to child components, namely:

Attribute props Reference $refs Child element $children

In daily development, we use props and $refs more frequently, and $children is relatively less (I haven't used it much ~).

Attribute props

Add attributes in the parent component and receive them in the child component, for example:

Parent component:

<HelloWorld msg="Welcome to Your Vue.js App" />

Subcomponents:

<h1>{{ msg }}</h1>

props: {
 msg: String
}

Reference $refs

You can use this. $refs. xxx in the parent component to get the data or methods defined in the child component and use the.

Parent component:

<HelloWorld ref="hw" />

mounted() {
 this.$refs.hw.foo = "bar";
}

Subcomponents:

<p>{{ foo }}</p>

data() {
 return {
 foo: "foo"
 };
}

Precautions:

this. $refs. xxx cannot be used in the created lifecycle because the real DOM has not been mounted yet. If you have to, you can use vm. $nextTick to access DOM. Alternatively, it can be understood that the parent component is created before the child component, and the child component has not been created in the created life cycle of the parent component, so the child component cannot be obtained.

In Vue, the component life cycle call sequence is as follows:

The invocation order of building is father after son, and the order of rendering completion is son before father

The destruction operation of components is father and son, and the order of destruction is son and father

Load rendering process

Parent beforeCreate Parent created Parent beforeMount Sub-beforeCreate Sub-created Sub-beforeMount Sub-mounted Parent mounted

Subcomponent update process

Parent beforeUpdate Sub-beforeUpdate Sub-updated Parent updated

Parent component update process

Parent beforeUpdate Parent updated

Destruction process

Parent beforeDestroy Sub-beforeDestroy Sub-destroyed Parent destroyed

created() {
 console.log(" No. 1 1 Execution ");
 console.log(this.$refs.hw); // undefined
 this.$nextTick(() => {
 console.log(" No. 1 3 Execution ");
 console.log(this.$refs.hw); //  At this point, you can get the 
 });
}

mounted() {
 console.log(" No. 1 2 Execution ");
 this.$refs.hw.foo = "bar";
}

Child element $children

Parent component:

this.$children[0].xx = "xxx";

Precautions:

$children Gets the immediate child component of the current instance. If there are multiple child components in the parent component, note that $children does not guarantee order and is not responsive.

Child component passes value to parent component

The method used by child components to pass values to parent components is custom events. Distribute in child components and listen in parent components.

Note: Whoever distributes the event is the listener of the event, but it is declared in the parent component when it is declared.

It can be divided into three situations: no parameter is passed, one parameter is passed, and multiple parameters are passed.

Do not pass parameters

Subcomponents:

this.$emit('childFoo');

Parent component:

<HelloWorld2 @childFoo="onChildFoo"></HelloWorld2>

methods: {
 onChildFoo() {
 console.log("====== onChildFoo ========");
 }
}

Pass 1 parameter

Use $event to receive parameters in the parent component.

Subcomponents:

this.$emit('childFooSingle', 'foo');

Parent component:

<HelloWorld2 @childFooSingle="onChildFooSingle($event)"></HelloWorld2>

methods: {
 onChildFooSingle(e) {
 console.log(e); // foo
 }
}

Pass multiple parameters

Use arguments to receive parameters in the parent assembly, which are passed in the form of an array.

Subcomponents:

<h1>{{ msg }}</h1>

props: {
 msg: String
}

0

Parent component:

<h1>{{ msg }}</h1>

props: {
 msg: String
}

1

Value transfer between sibling components

Values between sibling components can be passed through a common parent component bridging, for example: $parent, $root.

Brother Component 1:

<h1>{{ msg }}</h1>

props: {
 msg: String
}

2

Brother Component 2:

this.$parent.$emit('foo');

Value transmission between ancestors and descendants

Because there are too many layers of component nesting, it is impractical to use props for delivery. vue provides provide/inject API for this task.

provide/inject can transfer values from ancestors to descendants.

Ancestors:

<h1>{{ msg }}</h1>

props: {
 msg: String
}

4

Descendants:

<h1>{{ msg }}</h1>

props: {
 msg: String
}

5

Note: provide and inject mainly provide use cases for high-level components/component libraries, and are not recommended for direct use in application code. We will see more in open source component libraries. However, in turn, if you want future generations to pass on values to your ancestors, this scheme will not work! ! !

Official note: provide and inject bindings are not responsive. This is deliberately done. However, if you pass in a listenable object, the property of the object is responsive.

Ancestors:

<h1>{{ msg }}</h1>

props: {
 msg: String
}

6

Descendants:

<h1>{{ msg }}</h1>

props: {
 msg: String
}

7

Passing values between any two components

There are two schemes for transferring values between any two components: event bus and Vuex.

Event bus

Create an Bus class responsible for event dispatch, listening and callback management.

First create an bus. js, introduce it in main. js, and then use it in the component:

Step 1: Create new plugins/bus. js

class Bus{
 constructor(){
 this.callbacks = {}
 }
 $on(name, fn){
 this.callbacks[name] = this.callbacks[name] || []
 this.callbacks[name].push(fn)
 }
 $emit(name, args){
 if(this.callbacks[name]){
  this.callbacks[name].forEach(cb => cb(args))
 }
 }
}

export default Bus;

Step 2: Introduced in main. js

<h1>{{ msg }}</h1>

props: {
 msg: String
}

9

Step 3: Use the

Component 1:

this.$bus.$on('foo', handle)

Component 2:

this.$bus.$emit('foo')

Vuex

Create a 1-only global data manager store that manages data and notifies components of state changes. You can know the official document Vuex first, and you will write a special topic after using it in detail ~

Summarize