加载中... Vue如何封装一个input组件 - semyin's blog
95°

Vue如何封装一个input组件

组件

// template
<input
    :type="type"
    :placeholder="placeholder"
    :value="value"
    @input="(e) => this.$emit('input', e.target.value)"/>
    
// js
export defalut {
    name: 'customInput',
    props: {
      type: {
        type: String,
        default: () => 'text'
      },
      placeholder: {
        type: String,
        default: () => ''
      },
      value: {
        type: String,
        required: true
      },
}

使用

// template
<custom-input v-model="value" placeholder="请输入"/>

// js
new Vue({
    components: {
      CustomInput
    },
    data() {
      return {
        value: '',
      }
    },
    watch: {
      value(oldValue, newValue) {
        console.log(oldValue, newValue)
      }
    }
  }).$mount("#app");

已有 0 条评论

    我有话说: