Summary of VueJs parent-child component communication methods

This time I will bring you a summary of the communication methods of VueJs parent-child components. What are the precautions for VueJs parent-child component communication? The following is a practical case, let's take a look.

Component (Father-Child Communication)

1. Summary

Define another component within a component, which is called Parent-child components.

But it should be noted that: 1. Child components can only be used inside the parent component (written in the parent component template); The data on, the scope of each component instance is independent;

How to complete the communication between father and son, in a simple sentence: props down, events up: the parent component passes data downward to the child component through props , the child component sends to the parent component through events

Pass from parent to child: Props

Pass from child to parent: Child: $emit(eventName) Parent $on(eventName)

Parent accesses child: ref

Let’s explain the three cases below:

2. Pass from father to son: Props The scope of the component instance is isolated. This means that you cannot (and should not) reference the parent component's data directly within the child component's template. To allow the child component to use the data of the parent component, you need to use the props option of the child component

Using Prop to transfer data includes static and dynamic forms. Let’s first introduce static props

1, static props

Effect:

## Naming convention:

For attributes declared by props, in the parent HTML template, the attribute name It is necessary to use the dash writing method

When the child props attribute is declared, you can use the small camel case or the dash writing method; when the child template uses variables passed from the parent, you need to use the corresponding small camel case Writing method

What does the above sentence mean?

If myMessage in our childNode is changed to {{my-message}}, look at the running results:

2. Dynamic props

In the template, you need to dynamically bind the data of the parent component to the props of the child template, which is similar to binding to any ordinary HTML feature, that is, use v-bind. Whenever the data of the parent component changes, the change will also be transmitted to the child component

 var childNode = {
  template: '
{{myMessage}}
',
  props: ['my-message']
    }
 var parentNode = {
  template: `
 

 
 
 
`,
  components: {
   'child': childNode
  },
  data() {
   return {
    'data1': '111',
    'data2': '222'
   }
  }
 };

3. Passing numbers

A common mistake beginners make is to use literal syntax to pass values

Result:

Because it is a literal prop, its value is String

"1" instead of number. If you want to pass an actual number, you need to use v-bind so that its value is treated as a JS

expressioncalculation How to convert String to number? In fact, you only need to change one place.

 var parentNode = {
  template: `
 

 //只要把父组件my-message="1"改成:my-message="1"结果就变成number类型
 
 
`,
 };

Of course, if you want to pass a string type through v-bind, what should you do?

We can use dynamic props and set the corresponding number in the data attribute 1

var parentNode = {
 template: `
 

 
 
`,
 components: {
 'myChild': childNode
 },
 //这里'data': 1代表就是number类型，'data': "1"那就代表String类型
 data(){
 return {
  'data': 1
 }
 }
};

3. Transfer from child to parent: $emit

About the usage of $emit

1. The parent component can use props to pass data to the child component.

2. Subcomponents can use $emit to trigger custom events of parent components.

Child primary key

Parent component