一：实现子组件与父组件双向绑定的“sync”：
一般来说，我们实现父子组件值的通报凡是使用的是【props】和自界说事件【$emit】。父组件通过【props】将值传给子组件，子组件通过【$emit】将值传给父组件，父组件通过【$on】获取子组件传过来的值，如果说想要实现子组件改削父组件传过来的值，最容易的就是这种要领了：
//父组件向子组件传值
<template>
<div>
<child-com :value="text"></child-com>
</div>
</template>
<script>
export default{
data(){
return{
text:"父组件的值",
}
}
}
</script>
//子组件向父组件传值
<template>
<div @click="post"></div>
</template>
<script>
export default{
methods:{
post(){
this.$emit(‘getChildValue‘,"子组件的值")
}
}
}
</script>
此时父组件可以通过【$on】获取子组件的值：
<template> <div> <child-com :value="text" @getChildValue = "getValue"></child-com> </div> </template> <script> export default{ data(){ return { text:"父组件的值", } }, methods:{ getValue(child_value){ this.text = child_value; } } } </script>
这样，就可以实现子组件改削父组件的值。
不过，这种要领有一个毛病——子组件改削父组件的值需要一个通报的过程，或者说，两个值并不是同步的。
熟悉Vue1.0的伴侣应该知道一个叫【.sync】的修饰符，它可以实现父子组件的双向绑定，不过在Vue2.0被移除了，直到2.3.0版本颁布后才从头回归，所以一些和我一样从2.0开始使用Vue的伴侣很有可能不清楚，事实上，【.sync】可以很轻松的实现子组件同步改削父组件的值：
//父组件
<template>
<div>
<child-com :value.sync="text" ></child-com>
</div>
</template>
<script>
export default{
data(){
return {
text:"父组件的值",
}
},
}
</script>
//子组件改削父组件的值 <template> <div @click="post"></div> </template> <script> export default{ methods:{ post(){ this.$emit(‘update:data‘,"子组件的值") } } } </script>
我们可以看到，对付子组件来说，仅仅是自界说事件名做了一点转变，但是就代码底层逻辑来说，子组件和父组件真正实现了同步的双向绑定。
固然，正如文档所说：
.sync修饰符很便利，但也会导致问题，因为粉碎了单向数据流。由于子组件转变 prop 的代码和普通的状态窜改代码毫无区别，当光看子组件的代码时，你完全不知道它何时暗暗地转变了父组件的状态。这在 debug 庞大布局的应用时会带来很高的维护本钱。
二：自界说指令：“directives”
关于自界说指令文档其实介绍的对照详细了，而且还举了一个非常详细的例子：自界说指令
自界说指令其实就是Vue为我们供给直接操纵dom的一些列要领，虽然大部分隔发时间城市面向数据，但说禁绝什么时候确实需要操纵dom自己。
就我而言，自界说指令最大的用处就是可以引用一些第三方的代码插入到Vue项目中，好比有一个操纵dom的函数：
//固然，真实情况第三方的代码要庞大的多
function changeColor(dom){
dom.style.backgroundColor = "red";
}
我们可以注册一个全局的指令来为需要执行changeColor要领的dom供给指令：
Vue.directives(‘color‘,{ bind:function(el){ changeColor(el) } })
这样，如果需要这个dom转变颜色的话，只需要这样即可：
<div v-color>转变颜色</div>
当日常开发遇到跟dom有关的问题却一筹莫展时，可以想想自界说指令是否有成果可以解决为题。
三： inheritAttrs和attrs
前面我已经提到过了，父组件通过props可以向子组件传值，但在日常的开发中，还有一种情况很常见，就是父组件给子组件传值，这个值还要从子组件传给它的子组件，所以，我们可能会看到这样的代码：
//父组件 <div> <child :text="text"></child> </div> //子组件 <div> <my-child :text="text"></my-child> </div> //子组件的子组件 <div> <div>{{text}}</div> </div>