Vue2 input组件封装

原创于 2024-01-29 00:13:44 发布 · 509 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

Vue 专栏收录该内容

42 篇文章

订阅专栏

这篇文章详细介绍了在Vue应用中使用App.vue模板和自定义BaseSelect组件，展示了如何通过v-model实现数据绑定以及BaseSelect组件的输入事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

App.vue

<template>
  <div class="app">
    <BaseSelect v-model='username'></BaseSelect>
  </div>
</template>

<script>
import BaseSelect from './components/BaseSelect.vue'
export default {
  data() {
    return {
      username:'zhiyuan',
    }
  },
  components: {
    BaseSelect,
  },
}
</script>

<style>
</style>

BaseSelect.vue

<template>
  <div>
   username:<input type="text" 
   :value='value'
   v-on:input='handleInput'
   >
  </div>
</template>

<script>
export default {
  props:{
    value:String,
  },
  methods:{
    handleInput(e){
      this.$emit('input',e.target.value)
    }
  }
  
}

</script>

<style>
</style>