其實從這個描述中就可以很清楚的知道它們是怎么進行通訊的了。
外——指父組件（父組件指的是包含子組件的作用域稱為父組件）向
內——指子組件（子組件指的是在父組件作用域下的組件稱為子組件）。
要進行通訊就必須在子組件的構造對象（自定義標簽或者是原生HTML通過is）中顯示的設置props屬性進行數據的傳遞。
例如：
父組件作用域
~~~
<div class="parent">
<child message="form parent"></child>
</div>
~~~
子組件作用域
~~~
export default {
// 聲明來自父組件的props
props: ['message'],
data () {
return {
}
},
// 就像data一樣，prop可以直接在模版內使用，同樣也可以在 vm 實例中像 “this.message” 這樣使用
template: '<span>{{message}}</span>'
}
~~~
同樣如果是想實現動態數據語法，就可以在父組件作用域使用動態綁定屬性，代碼如下：
~~~
<div class="parent">
<child :message="msg"></child>
<div>{{msg}}</div>
</div>
<script>
export default {
data () {
return {
msg: 'This is from parent data'
}
},
components: {
child
}
}
</script>
~~~
子組件代碼不變，這樣就做到了動態綁定數據，子組件并不關心數據，它只關心它自己的邏輯代碼（雖然這里就是簡單的如何顯示數據而已，你大可添加更加復雜的交互邏輯，比如接收來自父組件的ajax數據）。
**需要注意：**
Vue默認是單向數據流，當父組件的屬性變化時，傳導給子組件的屬性也會發生變化。
還有就是每次父組件更新時，子組件上的所有prop都會更新：
~~~
<div class="parent">
<child :message="msg"></child>
<div>{{msg}}</div>
</div>
<script>
export default {
data () {
return {
msg: 'This is from parent data'
}
},
components: {
child
},
mounted () {
this.msg = '1'
}
}
</script>
~~~
**但是子組件的數據變化并不會影響到父組件的狀態**（***還會報錯***）：
父組件作用域
~~~
<div class="parent">
<child :message="msg"></child>
<div>{{msg}}</div>
</div>
<script>
export default {
data () {
return {
msg: 'This is from parent data'
}
},
components: {
child
}
}
</script>
~~~
子組件作用域
~~~
export default {
// 聲明來自父組件的props
props: ['message'],
// 就像data一樣，prop可以直接在模版內使用，同樣也可以在 vm 實例中像 “this.message” 這樣使用
template: '<span>{{message}}</span>',
mounted () {
this.message = 1
}
}
~~~
也就是說，不需要也不應該在子組件里操作prop（如果prop是一個對象或者數組，在子組件里改變它會影響父組件的狀態，這是不允許的）。
~~~
export default {
// 聲明來自父組件的props, 比如傳了個數組['This is from parent data']
props: ['message'],
// 就像data一樣，prop可以直接在模版內使用，同樣也可以在 vm 實例中像 “this.message” 這樣使用
template: '<span>{{message}}</span>',
mounted () {
// 改變引用類型對象，但是不報錯。
this.message.splice(this.message, 1, 1)
}
}
~~~
所以有時候我們是需要給props強制要求傳遞的數據類型：
~~~
export default {
// 聲明來自父組件的props
props: {
message: {
type: String,
default: 'This is default data' // 默認值
}
},
// 就像data一樣，prop可以直接在模版內使用，同樣也可以在 vm 實例中像 “this.message” 這樣使用
template: '<span>{{message}}</span>'
}
~~~
