vue-cli工程 中組件註冊 ，父組件向子組件傳值

**

首先咱們準備一個父組件模板
-------------

**

    1
    2
    3
    4
    5
    6

<template>
<template>
  <div id="app">

    <!-- 使用子組件 -->
    <!-- 向子組件傳值 須要在父組件中使用v-bind綁定一個名字 :outdata="arr" 其中outdata這個名字是
        你子組件中props屬性接收數據時的名字 -->
    <three :outdata="arr"/>
  </div>
</template>
<script>

//引入子組件
import three from './components/three'

export default {
//全局註冊組件
  components:{
    three
  },
  data(){
    return {
      arr:[1,2,3,4,5] //父組件的數據
    }
  }
}
</script>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27

子組件模板

<template>
    <div class="three">
        <h1>我是子組件</h1>

        <!-- 它倆都能獲得 -->
        {{ items }}
        <br>
        {{ outdata }}
    </div>
</template>

<script>     export default {         // 第一種寫法：不推薦         // props:['outdata'],         // 第二種寫法 推薦 須要注意傳值 和傳引用的default 寫法區別         // js中 object 和 Array 屬於傳引用 ,default 須要返回一個工廠函數的寫法         // 傳值：Number  String Boolean 類型 default: 0||''||false 寫法         // 當props中的數據類型驗證失敗時，在開發版本下 在控制檯會報警告         props:{             outdata:{                 type:Array,//類型也能夠是多樣 好比：String||Number                 required:true,                 default:()=>{                     return [];                 }             }         },         data(){             return{               items:this.outdata,// 也能夠在這裏接收             }         }     } </script>