vue中组件的封装

Question

子组件


父组件

页面

现在的问题是父组件如何控制 子组件的方法具体哪一个删除新增

Answer 1

在父组件内，给 AddContent 标签上加绑定的事件，在子组件内的删除、新增事件内都通过 emit，传值给父组件

Answer 2

父传子，通过props属性，子与父组件通信，通过在子组件内触发emit，父组件监听

// 父
<Parent>
    <Children name="tome" @save="save"></Children>
</Parent>

methods: {
    save() {
        // TODO
    }
}

// 子
<button @click="save">保存</button>

props: {
    name: string,
    default: ''
},
methods: {
    save() {
        this.$emit('save')
    }
}

Answer 3

通过$emit触发传值，方法名写一样，传index过去判断点击的是哪个方法然后做哪个操作