vue .sync $attrs $listener父子组件，多级组件通信

1..sync的使用：
.sync修饰符的作用就是更方便的实现父子组件间双向数据绑定，以前要实现父子组件双向数据绑定要这样做：

父组件：
<template>
    <div>
       <child1 :num="faNum" @update="val=>{faNum=val}"/>
    </div>
</template>
export default{
	data(){
        return{
            faNum:'test'
        }
    },
}
子组件中：
<template>
    <div class="contain">
        <button @click="$emit('update',Math.random()*10)">changeNum</button>
       {{num}}
    </div>
</template>
export default {props:['num']}

使用.sync之后：

父组件：
<template>
    <div>
       <child1 :num.sync="faNum"/>
    </div>
</template>
export default{
	data(){
        return{
            faNum:'test'
        }
    },
}
子组件中：
<template>
    <div class="contain">
        <button @click="$emit('update:num',Math.random()*10)">changeNum</button>
       {{num}}
    </div>
</template>
export default {props:['num']}

2.$attrs,$listeners多级组件之间通信：

//父
<template>
    <div>
       <child:num="faNum" @changeFromSon="val=>{faNum=val}"/>//此处属性传给子代，方法可以在孙级组件中调用
    </div>
</template>
export default{
	data(){
        return{
            faNum:'test'
        }
    },
}
//子
<template>
    <div class="contain">
        <button>changeNum</button>
       <groundson v-bind="$attrs" v-on="$listeners"/>//在此绑定$attrs,孙组件中即可拿到最上一级组件中传过来的faNum;绑定$listeners,孙组件可以调用最上一级的方法changeFromSon
    </div>
</template>
//孙
<template>
    <div>
        {{$attrs}}//注意，这里是对象{num:'test'},键是num,而不是faNum
        <button @click="$emit('changeFromSon','lskdfk')">sonBtn</button>//调用最上一级组件方法。
    </div>
</template>