scriptimportvGirlGroupfrom">
聯系我們 - 廣告服務 - 聯系電話：
您的當前位置： > 關注 > > 正文

vuejs之Vue2.x中的父組件數據傳遞至子組件的方法

來源：CSDN 時間：2023-03-20 16:08:57

Vue2.x中的父組件傳遞數據至子組件的方法


(資料圖)

父組件結構

template

:girls="aGirls">

script

import vGirlGroup from "./GirlGroup"

export default {

name: "girl",

components: {

vGirlGroup

},

data () {

return {

aGirls:[{

name:"小麗",

age:22

},{

name:"小美",

age:21

},{

name:"小荷",

age:24

}]

}

}

}

注意的點：

?子組件的拼寫方式:vGirlGroup寫成v-girl-group

?這里子組件中的綁定數據是:girls="aGirls",這里的aGirls數據是父組件中的data,girls是要傳遞至子組件的屬性

子組件結構

template

{{ index }} - {{ value.name }} - {{ value.age }}

注意的點：

?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-移除

export default {

name: "girl-group",

props: {

girls: {

type: Array,

required: true

}

}

}

注意點：

?props中的數據是來自在父組件中綁定在子組件上的值 另外:使用IDE、編輯器開發時，可能會提示成prop

?girls中對數據做了一些校驗

結果

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

以上就是本次給大家分享的關于java的全部知識點內容總結，大家還可以在下方相關文章里找到相關文章進一步學習，感謝大家的閱讀和支持。

您可能感興趣的文章:

責任編輯：

標簽：

相關推薦：

精彩放送：

新聞聚焦
Top 岛国精品在线