vue中父組件傳數據給子組件

父組件:vue

<template>
    <parent>
        <child :list="list"></child> //在這裏綁定list對象
    </parent>
</template>
import child from 'child.vue';
export default{
components:{child},
  data(){
  
return {
  
//父組件的數據綁定到子組件的包裹層上
  list:["haha","hehe","xixi"];
}
}

子組件:(子組件要嵌套到父組件中)函數

child.vue
<template>
   <ul>
        <li v-for="(item ,index)in list">{{item}}</li>
    </ul>
</template>
export default{
     props:{
    list:{
      type:Array,//type爲Array,default爲函數
      default(){
        return [
          "hahaxixihehe"//默認初始值
        ]}}
    }
,//用props屬性進行傳數據,此時子組件已經獲取到list的數據了 data(){ return {} } }
相關文章
相關標籤/搜索