The method by which the parent component in Vue2.x transmits data to the child component.

The method by which the parent component in Vue2.x transmits data to the child component.

Parent Component Structure

Template

<template> <div> <v-girl-group   :girls="aGirls"></v-girl-group> </div></template>

Script

<Script> import vGirlGroup from '. /GirlGroup 'export default {name: 'girl ', components: {vGirlGroup}, data () {return {aGirls: [{name: 'lily', age: 22 }, {name: 'xiaomei ', age: 21 },{ name: 'xiaohe', age: 24}] }}</script>

Note:

• Spelling of child components: vGirlGroup is written as v-girl-group
• The data bound to the child component is girls = "aGirls", where aGirls data is the data in the parent component, and girls is the attribute to be passed to the child component.

Child Component Structure

Template

<template> <div> <ul>  <li v-for="(value, index) in girls">{{ index }} - {{ value.name }} - {{ value.age }}</li> </ul> </div></template>

Note:

• V-for Parameter order when traversing objects-for details, refer to: https://cn.vuejs.org/v2/guide/migration.html?v-for-sequence of Parameter order when traversing objects-change
• Remove the $ index and $ key implicitly declared variables in v-for. for details, see https://cn.vuejs.org/v2/guide/migration.html?index-and-key-remove.

<script>export default { name: 'girl-group', props: { girls: {  type: Array,  required: true } }}</script>

Note:

• The data in props comes from the value bound to the child component in the parent component. In addition, when developing with IDE and editor, a prompt may be displayed as prop.
• Perform some validation on the data in girls.

Result

The above section describes how to transmit the data of the parent component in Vue2.x to the child component, hoping to help you. If you have any questions, please leave a message, the editor will reply to you in time!