纯手敲实现v-model组件之封装组件篇

2024-02-01 06:44:49

纯手敲实现v-model组件

众所周知，v-model是Vue.js中一个非常重要的指令，它可以实现双向数据绑定，即组件中的数据可以自动更新DOM，DOM中的数据也可以自动更新组件中的数据。这极大地简化了开发人员的开发工作。

但是，v-model并不是一个神奇的魔法，它也是可以手动实现的。下面我们就来一步一步地实现一个纯手敲的v-model组件。

第一步：创建组件模板

<template>
  <input type="text" :value="value" @input="onInput">
</template>

这个模板非常简单，它就是一个简单的输入框。其中，:value绑定了组件的value属性，@input监听了输入框的input事件。

第二步：创建组件脚本

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  methods: {
    onInput(event) {
      this.$emit('input', event.target.value)
    }
  }
}
</script>

在这个脚本中，我们定义了组件的props和methods。props中定义了value属性，它是一个字符串类型，默认值为''。methods中定义了onInput方法，它会在输入框的input事件触发时被调用。

第三步：使用组件

<template>
  <div>
    <input-text v-model="name"></input-text>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: ''
    }
  }
}
</script>

在这个示例中，我们使用了一个input-text组件，并将它的v-model属性绑定到了name数据。这样，当输入框中的值发生变化时，name数据也会自动更新。

封装组件

上面的示例中，我们直接将组件模板和脚本放在了同一个文件中。但是，在实际开发中，我们通常会将组件模板和脚本分开，并将其封装成一个单独的组件文件。这样可以使代码更易于维护和复用。

// input-text.vue
<template>
  <input type="text" :value="value" @input="onInput">
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  methods: {
    onInput(event) {
      this.$emit('input', event.target.value)
    }
  }
}
</script>

// main.js
import InputText from './input-text.vue'

export default {
  data() {
    return {
      name: ''
    }
  },
  components: {
    InputText
  }
}