Vue还有这种骚操做？浅析几个新手经常忽略的API

一.实现子组件与父组件双向绑定的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  @getChildValue = "getValue"></child-com>
    </div>
</template>

<script>
    export default{
        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:value',"子组件的值")
            }
        }
    }
</script>
复制代码

咱们能够看到，对于子组件来讲，仅仅是自定义事件名作了一点改变，可是就代码底层逻辑来讲，子组件和父组件真正实现了同步的双向绑定。

固然，正如文档所说：

.sync修饰符很方便，但也会致使问题，由于破坏了单向数据流。因为子组件改变 prop 的代码和普通的状态改动代码毫无区别，当光看子组件的代码时，你彻底不知道它什么时候悄悄地改变了父组件的状态。这在 debug 复杂结构的应用时会带来很高的维护成本

二.自定义指令directives

关于自定义指令文档其实介绍的比较详细了，并且还举了一个很是详细的例子：自定义指令自定义指令其实就是Vue为咱们提供直接操做dom的一些列方法，虽然大部分开发时间都会面向数据，但说不许何时确实须要操做dom自己。就我而言，自定义指令最大的用处就是能够引用一些第三方的代码插入到Vue项目中，好比有一个操做dom的函数：

//固然，真实状况第三方的代码要复杂的多
function changeColor(dom){
    dom.style.backgroundColor = "red";
}
复制代码

//固然，真实状况第三方的代码要复杂的多
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>
复制代码

这样作是很是麻烦并且不易于维护的，一般状况下，咱们可使用vuex来解决。不过，不复杂的项目中若是仅仅为这一个问题就引入vuex其实是不必的，Vue提供了【inheritAttrs】和【attrs】两个功能来解决这样的问题：

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

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

//子组件
<template>
    <div>{{text}}</div>
</template>
<script>
    export default{
        props:["text"]
    }
</script>
复制代码

注意，这里父组件的count属性仅仅挂在子组件上，并无使用。此时咱们打开浏览器，能够看到子组件的dom上显示的展现了count="123456"。

此时，咱们能够经过设置inheritAttrs: false来取消这种默认行为：

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

inheritAttrs: false,
mounted(){
  console.log(this.$attrs); //{count:123456}
}
复制代码

这时再看dom上就没有count属性了。而后，我还打印了this.$attrs的值，值为一个包含着count键值对的Object。也就是说，父组件没有props的属性值会被保存在一个名为$attrs中供子组件使用，然而这并无解决开头子组件的子组件获取值的问题。别急，咱们只须要在子组件上加个东西就能够了：

<template>
    <div class="child"> <my-child v-bind="$attrs"></my-child> </div> </template>
复制代码

这样，子组件的子组件也能够获取这个值了。

四.mixins

其实这个功能有些相似于es6中的Object.assign()方法。根据必定的规则合并两个配置，具体的混入策略能够看官方文档：mixins混入策略混入最大的用处是把一些经常使用的data或者methods等抽出来，好比在个人项目中有许多个模态框，而关闭模态框的代码逻辑是如出一辙的，为此我没有必要在多个组件中重复把关闭模态框的逻辑写入methods中，只须要在外面定义一个mixins，在须要的组件中经过：mixins: [myMin]写入便可。

var mixin = {
  methods: {
    close: function () {
      this.showModal = false; //关闭模态框
    },
  }
}

var vm = new Vue(
    mixins: [mixin],
    .......
})
复制代码

五.provide / inject

首先感谢评论区大佬们的提醒，provide/inject方法要比`inheritAttrs/attrs更适合用来作父组件给子组件或孙组件传值，先发一个文档的连接：[provide/inject][1]

//父组件使用provide
<template>  
  <div class="parent">      
    <child-component></child-component>    
  </div>
</template>

<script>
export default {  
  ......  
  provide: {    
    parent: "父组件的值"  
  },  
  components:{    
    child-component,  
  },  
  ......
</script>

//此时能够在子组件经过这种方式获取父组件中“parent”的值：
//子组件中
export default {  
  mounted(){      
    console.log(this.parent); //"父组件的值"  
  },  
  inject: ['parent'],
}
复制代码

须要注意的是provide和inject的绑定并非响应的，可是若是咱们provide的是一个对象，那么这个对象的属性还是可响应的。咱们能够用如下方法一样能够解决上面三中的问题

//父组件使用provide
<script>
export default {  
  provide () {
    return {
        parent: this
    }
  },
  data () {
    return {
      name: ''
    }
  }
}
</script>

//此时能够在子组件经过这种方式获取父组件中全部parent全部响应数据：
//此时在子组件中this.parent.name是响应式的，即父组件的name修改，子组件获取的name也会作出响应的变化
//子组件中
export default {  
  mounted(){      
    console.log(this.parent.name); //"父组件某个属性的值"  
  },  
  inject: ['parent'],
}
复制代码

---

转载声明：
	做者：陈杰夫
	连接：https://juejin.im/post/5adc99f56fb9a07abd0d3ee7
	来源：掘金
	声明：著做权归做者全部，谢绝商业转载。如需转载请联系原做者或者按照其原文声明进行操做。
	承诺：本站除原创之外全部的转载内容均是得到其做者受权或者声明可转载的。并只是将其做为学习和交流目的，杜绝一切商业盈利行为。如若侵权，请联系咱们删除。
复制代码

91Code-就要编码，关注公众号获取更多内容！