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