其实从这个描述中就可以很清楚的知道它们是怎么进行通讯的了。
外——指父组件（父组件指的是包含子组件的作用域称为父组件）向
内——指子组件（子组件指的是在父组件作用域下的组件称为子组件）。
要进行通讯就必须在子组件的构造对象（自定义标签或者是原生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>'
}
~~~
