1.props（父传子）
父组件Parent.vue
<template>
<child :msg="message"></child>
</template>
父组件通过:val="value"的形式定义要传给子组件的值value绑定到val上
子组件Child.vue
export default {
//写法一 用数组接收
props:['msg'],
//写法二 用对象接收，可以绑定接收的数据类型、设置默认值、验证等
props:{
msg:{
type：string,
default:"这是默认值"
}
},
created(){
console.log(this.msg)
}
}
子组件通过props的方法接收父组件绑定的val
2.$emit（子传父）
父组件Parent.vue
<template>
<p>{
{num}}</p>
<child @getVal="getvalue()"></child>
</template>
<script>
export default {
components:{
child
},
data(){
return{
num=''
}
},
methods:{
getvalue(val){
this.num = val
}
}
}
</script>
子组件Child.vue
export default {
data(){
return{
val=1
}
},
methods:{
sendval(){
this.$emit("getVal",this.val)
}
}
}
3、依赖注入（provide / inject）
这种方式就是vue中依赖注入，该方法用于 父子组件之间 的通信。当然这里所说的父子不一定是真正的父子，也可以是祖孙组件，在层数很深的情况下，可以使用这种方式来进行传值。就不用一层一层的传递数据了。
provide和inject是vue提供的两个钩子，和data、methods是同级的。并且provide的书写形式和data一样
provide 钩子用来发送数据或方法,inject钩子用来接收数据或方法
provide() {
return {
num: this.num
};
}
inject: ['num']
注意： 依赖注入所提供的属性是非响应式的。
4、$parent / $children
使用$parent可以让组件访问父组件的实例（访问的是上一级父组件的属性和方法）。
使用 $children 可以让组件访问子组件的实例，但是， $children 并不能保证顺序，并且访问的数据也不是响应式的。子组件：
<template>
<div>
<span>{
{message}}</span>
<p>获取父组件的值为: {
{parentVal}}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Vue'
}
},
computed:{
parentVal(){
return this.$parent.msg;
}
}
}
</script>
父组件：
<template>
<div class="hello_world">
<div>{
{msg}}</div>
<child></child>
<button @click="change">点击改变子组件值</button>
</div>
</template>
<script>
import child from './child.vue'
export default {
components: { child },
data() {
return {
msg: 'Welcome'
}
},
methods: {
change() {
// 获取到子组件
this.$children[0].message = 'JavaScript'
}
}
}
</script>
在上面的代码中，子组件获取到了父组件的parentVal值，父组件改变了子组件中message的值。
1.通过 $parent 访问到的是上一级父组件的实例，可以使用 $root 来访问根组件的实例
2.在组件中使用$children拿到的是所有的子组件的实例，它是一个数组，并且是无序的
3.在根组件 #app 上拿 $parent 得到的是 new Vue()的实例，在这实例上再拿 $parent 得到的是undefined，而在最底层的子组件拿 $children 是个空数组
4.$children 的值是数组，而 $parent是个对象
5、$root
将数据data挂载在vue实例上，子组件通过this.$root.xxx 可以访问