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

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

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

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標(biāo)簽上每次輸入時觸發(fā)原生事件input，在這個事件上綁定了一個handleInput方法，事件每次觸發(fā)都會執(zhí)行方法里的$emit屬性。該屬性里面第一個參數(shù)可以定義一個事件名，第二個參數(shù)可以傳一個參數(shù)。這里我們把每次輸入的值e.target.value傳進去。在父組件的子組件上監(jiān)聽這個事件，定義一個post方法，方法的參數(shù)就是傳入的數(shù)據(jù)。然后我們在父組件的data屬性里定義一個存儲值的變量value。將剛才傳入的參數(shù)賦給這個變量value。最后在父組件的子組件上綁定一個自定義屬性，比如val。將value傳給val。在子組件定義一個props屬性接受這個val。

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


作者：Vam的金豆之路

主要領(lǐng)域：前端開發(fā)

我的微信：maomin9761

微信公眾號：前端歷劫之路