Vue--props

組件實例的做用域是孤立的。這意味着不能 (也不該該) 在子組件的模板內直接引用父組件的數據。要讓子組件使用父組件的數據，咱們須要經過子組件的 props 選項。

字面量語法 vs 動態語法

初學者常犯的一個錯誤是使用字面量語法傳遞數值：

由於它是一個字面 prop，它的值是字符串 "1" 而不是 number。若是想傳遞一個實際的 number，須要使用 v-bind，從而讓它的值被看成 JavaScript 表達式計算：

App.vue  （父組件）

<template>

<div>

<h1>我是app組件</h1>

<zujian :color="111"></zujian>

</div>

</template>

<script>

import zujian from './components/zujian.vue'

export default{

data(){

return{

a:1

}

},

components:{

zujian

}

}

</script>

Zujian.vue(子組件)

<template>

<div>

<h1>我是zujian組件 {{typeof color}}---{{color}}</h1>

</div>

</template>

<script>

export default{

props:["color"],  // 父親傳 誰用誰接受（兒子接受）

data(){

return{

 

}

}

}

</script>

 更多請訪問：https://cn.vuejs.org/v2/guide/components.html#Prop