封装 elementui el-input组件

原创已于 2022-04-15 17:47:39 修改 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #es6 #前端 #javascript

于 2022-04-15 17:45:32 首次发布

elementsui 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何在Vue项目中利用Element UI库封装一个可定制的el-input组件，通过props传递值并实现双向数据绑定，以及使用@input事件处理用户输入并触发父组件回调。

封装 elementui el-input组件

Vue.component(
    'myinput', {
        props: {
            inputvalue: {
                type: [String, Number],
            },
        },
        template: `<el-input v-model="myinputvaleu" placeholder="请输入内容"  @input="handleInput"></el-input>`,
        data() {
            return {
                myinputvaleu: this.inputvalue
            }
        },
        mounted() {

        },
        methods: {
            handleInput() {
                this.$emit('input', this.myinputvaleu)
            }
        }
    }
)