快捷導(dǎo)航

Vue2.x中的父組件傳遞數(shù)據(jù)至子組件的方法

更新時間：2017年05月01日 10:03:27 作者：leslie·Zhao

這篇文章主要介紹了Vue2.x中的父組件數(shù)據(jù)傳遞至子組件的方法,需要的朋友可以參考下

父組件結(jié)構(gòu)

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
•這里子組件中的綁定數(shù)據(jù)是:girls="aGirls",這里的aGirls數(shù)據(jù)是父組件中的data,girls是要傳遞至子組件的屬性

子組件結(jié)構(gòu)

template

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

注意的點：

•v-for的遍歷對象時的參數(shù)順序-變更具體見:https://cn.vuejs.org/v2/guide/migration.html#v-for-遍歷對象時的參數(shù)順序-變更
•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中的數(shù)據(jù)是來自在父組件中綁定在子組件上的值另外:使用IDE、編輯器開發(fā)時，可能會提示成prop
•girls中對數(shù)據(jù)做了一些校驗

結(jié)果

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

您可能感興趣的文章:

相關(guān)文章

vue-photo-preview圖片預(yù)覽失效的問題及解決
這篇文章主要介紹了vue-photo-preview圖片預(yù)覽失效的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
如何使用Vue3.2+Vite2.7從0快速打造一個UI組件庫
構(gòu)建工具使用vue3推薦的vite,下面這篇文章主要給大家介紹了關(guān)于如何使用Vue3.2+Vite2.7從0快速打造一個UI組件庫的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-09-09
一文教你學(xué)會在Vue3中自定義指令
這篇文章主要為大家詳細(xì)介紹一下如何在Vue3中實現(xiàn)自定義指令，文中的示例代碼講解詳細(xì)，具有一定的借鑒價值，需要的同學(xué)可以參考一下
2022-07-07
詳解Vue項目中出現(xiàn)Loading chunk {n} failed問題的解決方法
這篇文章主要介紹了詳解Vue項目中出現(xiàn)Loading chunk {n} failed問題的解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09
Vue3中的ref和reactive響應(yīng)式原理解析
這篇文章主要介紹了Vue3中的ref和reactive響應(yīng)式,本節(jié)主要介紹了響應(yīng)式變量和對象，以及變量和對象在響應(yīng)式和非響應(yīng)式之間的轉(zhuǎn)換，需要的朋友可以參考下
2022-08-08
vue使用smooth-signature實現(xiàn)移動端橫豎屏電子簽字
這篇文章主要為大家介紹了vue使用smooth-signature實現(xiàn)移動端橫豎屏電子簽字示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-10-10
el-select 下拉框全選、多選的幾種方式組件示例詳解
這篇文章主要介紹了el-select 下拉框全選、多選的幾種方式組件示例詳解,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2023-12-12
Vue3項目打包后部署到服務(wù)器請求不到后臺接口解決方法
在本篇文章里小編給大家整理了關(guān)于Vue3項目打包后部署到服務(wù)器請求不到后臺接口解決方法，有需要的朋友們可以參考下。
2020-02-02
Vue+ssh框架實現(xiàn)在線聊天
這篇文章主要為大家詳細(xì)介紹了Vue+ssh框架實現(xiàn)在線聊天，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-06-06
vue-router使用next()跳轉(zhuǎn)到指定路徑時會無限循環(huán)問題
這篇文章主要介紹了vue-router使用next()跳轉(zhuǎn)到指定路徑時會無限循環(huán)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-11-11