vue填坑之-組件嵌套

參考: https://www.jianshu.com/p/b358cd920efa

需求: 現有一組件，要作功能擴展！ 因此要把v-model弄好

原組件（借用一下）：

<template>
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
</template>
<script>
export default {
    name: 'base-checkbox',
    model:{
        prop: 'checked',
        event: 'change'
    },
    props: {checked: Boolean}
}

如此使用:

<base-checkbox v-model="lovingVue"></base-checkbox>

 

擴展組件：

<template>
  <base-checkbox v-model="newlovingVue"></base-checkbox>
</template>
<script>
export default {
    name: 'special-checkbox ',
    model:{
        prop:'lovingVue',　//要存在於proops
        event:'change'　//當組件的值發生改變時要emit的事件名
    },
    props: ['lovingVue'],
    data:function(){
        return{//要從新定義一個data，賦值爲props中的值，由於組件時單數據流，不能直接修改props
            newlovingVue:this.lovingVue
        } 
    },
    watch:{//這裏檢測data中的值，一旦發生變化就提交事件到父組件
        newlovingVue:function(newVal,oldVal){
            this.$emit('change',newVal)
        },
     //注：此處原文沒有，若是不加上，複雜組件中父組件改變時，沒法改變子組件，我就是被坑的不要不要的....
     lovingVue:function(val){
        this.newlovingVue= val;
      },

    }
}
</script>

 

 

 

 

 

擴展後使用：

<special-checkbox v-model="lovingVue"></base-checkbox>

 

親測真實有效！

vue官網對應文檔爲: 

https://cn.vuejs.org/v2/guide/components.html#在組件上使用-v-model