[JavaScript知识库]vue3+element 封装el-input

search组件

<template>
    <div class="contain">
        <el-input class="input" v-model="value" @change="onInput" :placeholder="placeholder"></el-input>
    </div>
</template>

<script>
import { defineComponent, reactive, ref, watch, toRefs } from "vue";
export default defineComponent({
    name: "CustomInput",
    props: {
        modelValue: {
            type: [String, Number],
            default: "",
        },
        placeholder: { type: String, default: "" },
    },
    emits: ["update:modelValue"],
    setup(props, context) {
        // 绑定控件的值
        const value = ref("");

        // 监听属性，给 value 赋值
        watch(
            () => props.modelValue,
            (v1, v2) => {
                value.value = v1;
            },{
                immediate: true
            }
        );
        return {
            value,
            props,
        };
    },
    methods: {
        onInput(e) {
            this.$emit("update:modelValue", e);
        },
    },
});
</script>

使用的地方

<template>
    <div>
        <search v-model="msg" placeholder="请输入内容"/>
    </div>
</template>


<script>
import search from '../components/input/search.vue'
export default {
    components:{
        search
    },
    data() {
        return {
            msg:"3",
        }
    },
}
</script>