vue填坑之-组件嵌套

Posted 2020-11-16 signal

参考: 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