首页 > 网络编程 > JavaScript > vue2封装input组件方式(输入的双向绑定)

vue2封装input组件方式(输入的双向绑定)

福牛 4月 23, 2023 39 0

vue2封装input组件

重点

首先我们要明白 vue中v-modle 的对于input 做了什么

  1.      <input type=“text” v-model=“username”>
  2.      <input type=“text” :value=“username” @input=“username = $event.target.value”>

以上的两行代码，所呈现的效果是一样的。也就是说: v-model=“username” 在input中做了两件事情。

  • :value 绑定了值
  • @input=“username = $event.target.value” 监听了值的改变

代码示例：

父组件

  1. <template>
  2.      <div id=“app”>
  3.      <lj-input placeholder=“请输入” v-model=“username”></lj-input>
  4.      <div>{{username}}</div>
  5.      </div>
  6. </template>
  7.  
  8. <script>
  9. import ljInput from ‘./components/inputCom/LjInput.vue’
  10. export default {
  11.      name: ‘App’,
  12.      components: {
  13.      ljInput
  14.      },
  15.      data(){
  16.      return{
  17.          username:”,
  18.      }
  19.      },
  20.      methods: {
  21.      }
  22. }
  23. </script>

子组件

  1. <template>
  2.      <div class=“lj-input”>
  3.      <input :class=“{‘is-disabled’:disabled}”
  4.      :placeholder=“placeholder”
  5.      :type=“type”
  6.      :disabled =‘disabled’
  7.      :value=“value”
  8.      @input=“handleInput”
  9.      >
  10.      </div>
  11. </template>
  12.  
  13. <script>
  14. export default {
  15.      name:‘ljInput’,
  16.      props: {
  17.      placeholder:{
  18.          type:String,
  19.          default:”
  20.      },
  21.      type:{
  22.          type:String,
  23.          default:”
  24.      },
  25.      disabled:{
  26.          type:Boolean,
  27.          default:false
  28.      },
  29.      value:{
  30.          type:String,
  31.          default:”
  32.      }
  33.      },
  34.      methods:{
  35.      handleInput(e){
  36.      // 这句代码是关键
  37.          this.$emit(‘input’,e.target.value)
  38.      }
  39.      }
  40. }
  41. </script>
  42.  
  43. <style>
  44.      .is–disabled{
  45.          cursor: not–allowed;
  46.      }
  47. </style>

vue二次封装input的几种方式

下面就是自己封装input 框实现的效果

-1

在看如何封装之前，先来了解一下v-model是怎么回事。

-2

其实说白了，v-model就是change和value的结合体。

废话不多说，下面就来看一下在vue中如何封装自定义的input组件。

封装原生input

  1. <template>
  2.      <input type=“text” :value=“value” @input=“handleChange” />
  3. </template>
  4.  
  5. <script>
  6. export default {
  7.      name: “AppInput”,
  8.      model: {
  9.      prop: “value”,
  10.      event: “change”,
  11.      },
  12.      props: {
  13.      value: “”,
  14.      },
  15.      data() {
  16.      return {
  17.      };
  18.      },
  19.      created() {},
  20.      mounted() {},
  21.      methods: {
  22.      handleChange(e) {
  23.          this.$emit(“change”, e.target.value);
  24.      },
  25.      },
  26. };
  27. </script>

封装el-input

  1. <template>
  2. <!– 对el-input进行了包装–>
  3.      <div>
  4.      <el-input
  5.          v-model=“localValue”
  6.          @change=“$emit(‘change’, $event)”></el-input>
  7.          <!–
  8.          el-input提供了input事件，让我们感知el-input内部原生input值的变化，通过$event可以获取到具体的值
  9.          通过emit再次传递给父组件一个input事件，父组件中，v-on:input=”searchText = $event”这句就能正常使用了
  10.          –>
  11.      <span style=“color: #f56c6c; font-size: 12px;“></span>
  12.      </div>
  13. </template>
  15. <script>
  16.      export default {
  17.          name: “input-name”,
  18.          props: {
  19.          // 保证父组件中，v-bind:value可以正常设置值
  20.          value: [String],
  21.          },
  22.          data() {
  23.          return {
  24.              // 获取props中value的值，并与el-input绑定，过程中不修改props中value的值，保证了单向数据流原则
  25.              localValue: this.value
  26.          }
  27.          }
  28.      }
  29. </script>
  30. <style lang=“less” scoped>
  31. </style>

上面的那种方式会在回显数据时有问题。解决办法就是：如果出现异步回显数据那么就需要用计算来作为中间值转换。

  1. <template>
  2. <!– 对el-input进行了包装–>
  3.      <div>
  4.      <el-input
  5.          v-model=“localValue”
  6.          @change=“$emit(‘change’, $event)”></el-input>
  7.          <!–
  8.          el-input提供了input事件，让我们感知el-input内部原生input值的变化，通过$event可以获取到具体的值
  9.          通过emit再次传递给父组件一个input事件，父组件中，v-on:input=”searchText = $event”这句就能正常使用了
  10.      –>
  11.      <span style=“color: #f56c6c; font-size: 12px;“></span>
  12.      </div>
  13. </template>
  15. <script>
  16.      export default {
  17.          name: “input-name”,
  18.          props: {
  19.          // 保证父组件中，v-bind:value可以正常设置值
  20.          value: [String],
  21.          },
  22.          data() {
  23.          return {
  25.          }
  26.          }，
  27.          computed: {
  28.          localValue: {
  29.              get: function () {
  30.              console.log(this.value)
  31.              return this.value;
  32.              },
  33.              set: function (v) {
  34.              v;
  35.              },
  36.          },
  37.      },
  38.      }
  39. </script>
  40. <style lang=“less” scoped>
  41. </style>

VUE高级用法封装input

这种方式更加简洁，并且不会出现第二种封装方式出现的bug。

  1. <template>
  2. //这里不能使用v-model，会报子组件不能直接操作父组件传入参数的错误
  3. //使用value的话其实就是做一个回显因为外层的v-model在这里使用已经改变了外层的值了
  4.      <el-input
  5.          v-bind=“$attrs”
  6.          v-on=“$listeners”
  7.          :value=“value”
  8.      ></el-input>
  9. </template>
  10. <script>
  11. export default {
  12.      name: “f-input”,
  13.      data() {
  14.      return {
  15.      };
  16.      },
  17.      props: {
  18.      value:“”
  19.      },
  20.      created() {},
  21.      mounted() {},
  22.      methods: {}
  23. };
  24. </script>
  1. //正常的使用方式
  2. <f–input v–model=“number”>&lt;/f–input>
  3. //不用v-model语法糖的方式
  4. <f–input :value=“number” @change=“number = $event,target.value”></f–input>

这里核心用到了两个方法 attrs 和 listeners 其中 atters 可以把父组件标签上的所有自定义属性（不包括props,tyle,class）同步到当前元素中，listeners 可以把 f-input 标签上的所有方法同步到子组件中当前元素中。

那么上面已经知道 v-model 就是 change 和 value 的语法糖,那在 f-input 上绑定 listeners 就可以读取到 f-input 的 v-model 的 change 事件，atters 可以读取到 f-input 的 v-model 的 value 值。

$ 符号打不出来了，将就着看吧。如果还是不明白 atters和 listeners是怎么回事的可以看一下vue官网中的介绍。

-3

看官网又出了一种封装的写法，感觉挺有意思，在这里记录一下。

默认情况下，组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件。我们可以通过向 v-model 传递参数来修改这些名称

子组件将需要一个 firstName prop 和 lastName prop并发出 update:firstName 和 update:lastName要同步的事件

  1. var Component = {
  2.          props: {
  3.              firstName: String,
  4.              lastName: String
  5.          },
  6.          emits: [‘update:firstName’, ‘update:lastName’],
  7.          //vue3可以支持多个根元素，所有这个地方不会有报错，vue2是会报错的。
  8.          template: `
  9.                  <input
  10.                  type=”text”
  11.                  :value=”firstName”
  12.                  @input=”$emit(‘update:firstName’, $event.target.value)”>
  13.  
  14.                  <input
  15.                  type=”text”
  16.                  :value=”lastName”
  17.                  @input=”$emit(‘update:lastName’, $event.target.value)”>
  18.              `
  19.      }
  1. <template>
  2.      <my-component
  3.              v-model:first-name=“firstName”
  4.              v-model:last-name=“lastName”>
  5.      </my-component>
  6.      firstName:{{firstName}} lastName:{{lastName}}
  7. </template>
  8.  
  9. <script>
  10.      const App = {
  11.          setup(props, context) {
  12.              const data= reactive({
  13.                  firstName: 0,
  14.                  lastName: 0,
  15.              });
  16.              return {
  17.                  …toRefs(data),
  18.              }
  19.          },
  20.          components: {
  21.              ‘my-component’: Component,
  22.          },
  23.          methods: { },
  24.      };
  25.      const app = createApp(App).mount(‘#app’);
  26. </script>
  27.  

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

标签

相关推荐

发表评论