Vue2.x中的父組件傳遞資料至子組件的方法，vue2.x傳遞

Vue2.x中的父組件傳遞資料至子組件的方法，vue2.x傳遞

父組件結構

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:'小麗',  age:22  },{  name:'小美',  age:21  },{  name:'小荷',  age:24  }] } }}</script>

注意的點：

•子組件的拼字方式:vGirlGroup寫成v-girl-group
•這裡子組件中的綁定資料是:girls="aGirls",這裡的aGirls資料是父組件中的data,girls是要傳遞至子組件的屬性

子組件結構

template

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

注意的點：

•v-for的遍曆對象時的參數順序-變更 具體見:https://cn.vuejs.org/v2/guide/migration.html#v-for-遍曆對象時的參數順序-變更
•v-for中$index和$key這兩個隱式聲明的變數移除 具體見：https://cn.vuejs.org/v2/guide/migration.html#index-and-key-移除

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

注意點：

•props中的資料是來自在父組件中綁定在子組件上的值 另外:使用IDE、編輯器開發時，可能會提示成prop
•girls中對資料做了一些校正

結果

以上所述是小編給大家介紹的Vue2.x中的父組件資料傳遞至子組件，希望對大家有所協助，如果大家有任何疑問歡迎給我留言，小編會及時回複大家的！