Vue implements parent-child component communication

Regarding the issue of passing information, in Vue I think there are two ways:

1. Parent-child components transmit information through props
2. Managed through the Vuex state tree

In my opinion, projects that do not have Vuex must use Vuex. Like the requirement I encountered today, when the parent component is mounted, it pulls data first, and then passes it to a child component. The child component gets the data and re-renders it. According to this requirement, I choose to implement it more easily through props without maintaining Vuex.

First of all, I am using Vue 2.5

Method to realize

parent component

The first is the Html part, I define a child component, and then define a name attribute to pass to the child component

<div class='chart-container'>
   <child :name="name"></child>  
</div>

Then return on the data side:

export default {
  data() {
    name: 'child'
  }
}

The above defines a property of the parent component: "name", and assigns it to "child". We can call this.name = *** elsewhere to update the value.

Subassembly

First, the child component needs to be received (note that the parent component is passing a basic data type String, not an object. For the method of passing objects, see props explanation)

export default {
  props: {
    name: {
      type: String, // Define the received type as String to prevent transmission errors
      default: '' // default value is empty string
    }
}

After receiving it, we can use it in this component.

If it is a component property assignment, then write it like this:

<input :value="name"/>

If it is not an attribute, it can be written like this:

<div>{{ this.name }}</div>

If it is a component method, it is also called through this.name.

Prop verification

We can specify validation rules for component props. Vue will warn you if the incoming data does not meet the requirements.

To specify validation rules, props need to be defined as objects, not as arrays of strings

Vue.component('example', {
  props: {
    // Basic type checking (`null` means any type is allowed)
    propA: Number,
    // may be multiple types
    propB: [String, Number],
    // Required and is a string
    propC: {
      type: String,
      required: true
    },
    // Numeric with default value
    propD: {
      type: Number,
      default: 100
    },
    // The default value of the array/object should be returned by a factory function
    near: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // custom validation function
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

The above type can be the following native constructors:

• String
• Number
• Boolean
• Function
• Object
• Array
• Symbol

type can also be a custom constructor, detected using instanceof.