Vue回爐重造之如何使用props、emit實現自定義雙向綁定

你好，我是Vam的金豆之路，可以叫我豆哥。2019年年度博客之星、技術領域博客專家。主要領域：前端開發。我的微信是 maomin9761，有什麼疑問可以加我哦，自己創建了一個微信技術交流羣，可以加我邀請你一起交流學習。最後自己也創建了一個微信公衆號：前端歷劫之路，歡迎關注。

---

歡迎閱讀本博文，本博文主要講述【Vue回爐重造之如何使用props、emit實現自定義雙向綁定】，文字通俗易懂，如有不妥，還請多多指正。

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

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

import Vue from 'vueEsm' 

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

new Vue({
     el:'#app',
     data() {
         return {
             value:''
         }
     },
     components:{
        Com
     },
     template:`
      <div>
      <Com @input='post' :val='value'></Com>
      </div>
     `,
     methods:{
        post(data){
            this.value=data;
        }
     }
 })

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

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

謝謝閱讀，如果覺得有感觸，麻煩幫忙點個贊，關個注吧！