vue自定义组件v-model

89 阅读1分钟

自定义组件绑定v-model实现数据的响应式; 实质:指定接收model的内容,然后在修改了model指定内容之后通过input事件再传递广播出去,是的父组件可以接收到

父组件

// data 中定义了num
<child-vue v-model='num'>

子组件

// 模板
<el-input v-model="value" @change="changeInput"/>

// 接收父组件传递过来的参数
props: {
    num: {
        type: Number,
        default: 0
    }
}

// 绑定model的指定内容
model: {
    prop: 'num'
}

data() {
    return{
        value: this.num
    }
}

methods: {
    changeInput(val) {
        // 将改变之后的值通过 input事件传递出去父组件
        this.$emit('input', val)
    }
}