vue2.0 v-model二次封装element el-input

v-model二次封装element

父组件

<el v-model="value"></el>

子组件

<template>
<div class="el"v-on="$listeners"v-bind="$attrs">
    <el-input v-model="inValue"  />
</div>
</template>

<script>
    export default {
        name: "El",
        model: {
            prop: "modelValue",
            event: "returnModel",
        },
        props: {
            modelValue: String | Array | Object | Boolean | Number,
        },
        computed: {
            inValue: {
                get: function () {
                    // 获取传入的v-model
                    return this.modelValue;
                },
                set: function (newValue) {
                    // 修改时同时修改v-model
                    this.$emit("returnModel", newValue);
                    return newValue;
                },
            },
        },
    };
</script>

注意：

• model父组件v-mode传入的数据
  • prop :对应prop的modelValue
  • event：修改v-model的事件
• 为什么不直接 v-model 绑定 modelValue
  • 因为el-input修改同时会修改modelValue然后vue的prop数据是不允许被子组件修改的
  • 因此需要对应的event修改
  • 为了显示数据inValue单向绑定,set调用returnModel，get获取v-model值
• $listeners：同步 父容器内子组件使用的所有事件对象（注册的点击事件，可以直接相应到子组件的div上）
• $attrs：同步 父容器内子组件使用的所有属性对象（注册的属性值）