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

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

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

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;
        }
     }
 })

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

這個(gè)例子對(duì)于理解父組件與子組件傳值特別重要。


作者：Vam的金豆之路

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

我的微信：maomin9761

微信公眾號(hào)：前端歷劫之路