一：實現子組件與父組件雙向綁定的【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>復制代碼

（感謝@糖小面兒?，@asuishi?，@李佳毅?指出文中this.$emit('update:data',"子組件的值")的錯誤。）

我們可以看到，對于子組件來說，僅僅是自定義事件名做了一點改變，但是就代碼底層邏輯來說，子組件和父組件真正實現了同步的雙向綁定。

當然，正如文檔所說：

.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>復制代碼

這樣做是非常麻煩而且不易于維護的，通常情況下，我們可以使用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

//父組件使用provide <template> <div class="parent"> <child-component></child-component> </div> </div></template> <script>export default { ...... provide: { parent: "父組件的值" }, components:{ child-component, }, ......</script>//此時可以在子組件通過這種方式獲取父組件中“parent”的值： //子組件中 export default { mounted(){ console.log(this.parent); //"父組件的值" }, inject: ['parent'],}復制代碼

這塊兒內容我也是剛看文檔，感興趣的朋友可以仔細看看文檔，自己敲一遍看看。

總結

以上是生活随笔為你收集整理的Vue还有这种骚操作？浅析几个新手常常忽略的API的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。