這篇文章主要講解了Vue使用props、emit實現自定義雙向綁定的方法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。

創新互聯建站堅持“要么做到，要么別承諾”的工作理念，服務領域包括：網站設計、網站制作、企業官網、英文網站、手機端網站、網站推廣等服務，滿足客戶于互聯網時代的吉州網站設計、移動媒體設計的需求，幫助企業找到有效的互聯網解決方案。努力成為您成熟可靠的網絡建設合作伙伴！

下面我將使用Vue自帶的屬性實現簡單的雙向綁定。

下面的例子就是利用了父組件傳給子組件（在子組件定義props屬性，在父組件的子組件上綁定屬性），子組件傳給父組件（在子組件使用$emit()屬性定義一個觸發方法，在父組件上的子組件監聽這個事件）。

import Vue from 'vueEsm' 

var Com = {
  name:'Com',
  props:['val'],
  template:``,
  methods: {
    handleInput(e){
      this.$emit("input",e.target.value);
    }
  },
}

new Vue({
   el:'#app',
   data() {
     return {
       value:''
     }
   },
   components:{
    Com
   },
   template:`
   

   
   
   `,
   methods:{
    post(data){
      this.value=data;
    }
   }
 })

上面這個例子，在input標簽上每次輸入時觸發原生事件input，在這個事件上綁定了一個handleInput方法，事件每次觸發都會執行方法里的$emit屬性。該屬性里面第一個參數可以定義一個事件名，第二個參數可以傳一個參數。這里我們把每次輸入的值e.target.value傳進去。在父組件的子組件上監聽這個事件，定義一個post方法，方法的參數就是傳入的數據。然后我們在父組件的data屬性里定義一個存儲值的變量value。將剛才傳入的參數賦給這個變量value。最后在父組件的子組件上綁定一個自定義屬性，比如val。將value傳給val。在子組件定義一個props屬性接受這個val。

這個例子對于理解父組件與子組件傳值特別重要。

下方舉例說明了我的一個自定義mySelect的實現過程：

如上所示，當聲明了mySelect組件之后，在項目中實際使用時，就可以如下所示直接使用：

以上就是一個簡單的自定義雙向綁定組件的實現，包括簡單的使用過程。在vue中的自定義組件，關于props的聲明時，還是盡量使用官方建議的對象方式，可以聲明屬性的默認值和數據類型。我這邊偷懶了用的是props的字符串數組簡寫方式，但是這樣的話對使用組件時的錯誤調試不利。所以，盡量不要學我偷懶噢，親~~~

看完上述內容，是不是對Vue使用props、emit實現自定義雙向綁定的方法有進一步的了解，如果還想學習更多內容，歡迎關注創新互聯行業資訊頻道。