简单认识 .sync、inheritAttrs和attrs

1、实现子组件与父组件双向绑定的.sync修饰符

.sync修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值。
一般情况下，想要实现父子组件间值的传递，通常使用的是 props 和自定义事件 $emit 。
其中，父组件通过 props 将值传给子组件，子组件再通过 $emit 将值传给父组件，父组件通过事件监听获取子组件传过来的值。
如果想要简化这里的代码，可以使用.sync修饰符，实际上就是一个语法糖。
下面是简写代码块实例

//父组件
<div>
  <son :title="title" @changeTitle='dotitle'></son> 
//<son  :title.sync=title></son>  .sync其实是上面一句代码的语法糖（简写形式） 此时不用定义函数了
</div>
data(){
return{ 
   title: 标题A
}
},
methods: {
dotitle(titleValue){
   this.title=titleValue
}
}
//子组件
<div>{{title}}</div>
<button @click='change'></button>
props: {
  title: String
},
methods: {
change(){
this.$emit('changeTitle','标题B')
//this.$emit('update:title','标题B') uptade: [prop -name] 是固定写法
}
}

作用 : 对传递给子组件的 prop 数据进行“双向绑定”。（正常情况下，prop 的数据都是单向数据流）
其次,当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。如果我们不用.sync，我们也可以props传初始值，然后事件监听，实现起来也不算复杂。

2、inheritAttrs和attrs

应用场景： 父组件需要传递数据给子组件 子组件还要将这个数据传递给它的子组件

//父组件
<div>
    <child :text="text"></child>
</div>

//子组件
<div>
    <my-child :text="text"></my-child>
</div>

//子组件的子组件
<div>
    <div>{{text}}</div>
</div>

可以使用vuex来解决 但是不复杂的项目引用vuex实际没必要

//父组件
<template>
   <div>
     <child :text="text"  :count="count"></child>
   </div>
</template>

<script>
    export default{
        data(){
            return {
                text:"父组件的值"，
                count:123456，
            }
        }
    }
</script>



//子组件
<template>
    <div>{{text}}</div>  //但是能够看到count
</template>
<script>
    export default{
        props:["text"]
    }
</script>

可以通过设置inheritAttrs: false来取消这种默认行为

data(){
  return{
    ......   
  }  
}

inheritAttrs: false,  //取消这种默认行为
mounted(){
　　console.log(this.$attrs); //{count:123456}
}

<template>
    <div class="child">
        <my-child v-bind="$attrs"></my-child>
    </div>
</template>

这样，子组件的子组件也可以获取这个值了。