×

vue应用:聊聊原生input输入框的一些基本原理

作者:Terry2022.08.23来源:Web前端之家浏览:3715评论:0
关键词:vuejs

vue应用:聊聊原生input输入框的一些基本原理。我们以一个简单案例来说明。先看段代码:

<input value="value">

这里是一个原生的input输入框,每一个原生的输入框都会有一个value的属性来用于存储用于输入的最新的数据。

如果我们想要获取到这个值我们可以通过input.target.value或者通过$event.target.value来获取这个存储的值。

只要用户输入了数据,那么此时input标签就会将输入的数据放到这个value中(新数据会覆盖旧数据,所以我们获取到的都是最新的)。

现在我们来看上面的标签,我们为input标签添加了一个value属性,并且赋值'value'。其实在标签上设置value属性它的作用有两个:

  • 在第一次创建input标签的时候,将对应的初始值展示到输入框中 (在无该属性使输入框不展示任何数据)

  • 使用value属性的初始值来初始化input.target.value(无该属性时input.target.value为空串)

上面的那段代码的意思是通过添加value="value"属性,初始化input.target.value的值并且将初始值展示到对应的输入框中

这里需要注明一点,在后续用户输入的操作中,输入框中的数据只是方便让用户看到自己输入了什么仅此而已。 有人可以会有疑问,难道不是input.target.value里是什么所以输入框内就显示什么吗?其实不是的。

输入框显示什么和 input.target.value并没有直接联系,输入框内的显示只是方便用户自己看到自己输入了什么。

小结:

input中的value有两种:value="xxx"input.target.value 我们需要知道两个分别有什么作用。在整个输入显示流程中, 他们分别扮演什么角色。

现在我们来看在vue中的输入框,首先我们来看一段代码:

<input
   v-bind:value
   @input="value = $event.target.value"
/>
data(){
    return {
          value:'123'
    }
}

我们一般使用v-bind:value来给Input标签绑定一个vue中的的,这里我们绑定的是this.value。 在这里v-bind:value === :value="value"。 这样实现的原理比较简单。

首先我们定义了this.value因为将this.value绑定到了:value上,所以初始时会在输入框展示我们指定的 值,即'123'。当我们输入数据之后,此时$envet.target.value(这里的$event.target.value就是input.target.value)就会存储我们最新的输入的值,然后将最新的值赋值给this.value

因为this.value变化了,此时vue对页面进行更新,此时更新后的input:value是最新值。

但是这里有一个问题,那就是<input>并不会被销毁重建,也就是说this.value = $event.target.value只是改变了this.value 若别的地方引用了this.value,那么就会同步改变。那么this.value的更新对:value="value"的影响是什么呢?其实没有什么影响。

因为我们前面说了,:value的作用有两个:一是初始化input.value的值,二是将初始值渲染到对应的输入框中。 在一开始将this.value作为初始值给Input.value和展示在框里,他的任务已经完成了,后续的更改对:value没有一点关系。

其实:value="value"的唯一作用就是将this.value作为初始值绑定和展示到input上。

v-model

现在对于原始元素进行算双向数据绑定已经完成。那么如何实现父组件和子组件之间的双向数据绑定嗯? 此时我们需要在子组件中使用v-model。 关于 v-model 的使用这里不再赘述。这里只讨论如何在自定义组件实现 v-model。根据vue 的官网的描述,我们大概知道,v-model 的本质就是语法糖,即:

<input type="text" v-model="name">
相当于:
<input type="text" :value="name" @input="name = $event.target.value">

vue监听输入框输入行为然后改变对应的值。 如果对子组件进行双向数据绑定该如何实现呢?这里的双向数据绑定指的是父组件将值传递给子组件使用,并且子组件可以改变父组件的值 其实上述的双向绑定可以通过v-bind:propName.sync = 'xxx'来实现。 除了以上的方式,并且Vue还给我们提供了另一种方式:

<!-- 父组件.vue -->
<child-component :propName="data" @change="change" />
export default {
    data(){
     data:'123'
  },
  methods:{
     change(value){
        this.data = value
     }
  }
}
//在组件中如何想要改变父组件的值,那么直接出发对应的事件即可:
this.$emit('change', newValue )

vue中,它将上述的方法进行了简化,我们可以使用v-model来对子组件进行双向数据绑定。例如:

<child-component v-model="pageTitle" />
<!-- 是以下的简写: -->
<child-component :value="pageTitle" @input="pageTitle = $event" />

在默认情况下v-model的触发事件名称为input。 子组件想要使用的话,需要定义一个名为valueprop才能使用。 而在子组件中更改该值,只需要定义一个函数,有必要的时候执行 this.$emit('input', newValue) 即可。

这里的newValue就是$event。 这样就可以改变对应的值。 当然除了默认的valueinput的命名,vue还给我们提过了更加灵活的方式。

<!-- 父组件 -->
<child-component v-model="pageTitle" />
//子组件
export default {
  model: {
    prop: 'title', //这里相当于别名,这里可以起其他名称
    event: 'change' //这里相当于事件的别名,这里可以起其他名称
  },
  props: {
    // 这将允许 `value` 属性用于其他用途
    value: String,
    // 使用 `title` 代替 `value` 作为 model 的 prop
    title: {
      type: String,
      default: 'Default title'
    }
  }
}

当我们想在子组件中改变传入的值,那么直接可以this.$emit('change', newValue)

所以,在这个例子中 v-model 是以下的简写:

<child-component :title="pageTitle" @change="pageTitle = $event" />

其实本质上,项目中的twowayFactor这个混入配置类,他本质上就是做了上面的操作。

@Prop()
@Model('valueChanged')
    bindValue!: T;

这样做的目的是将v-model传入的prop改为bindValue。 然后将默认事件的名称从input改为了valueChange。 接着设置get/set

get currentValue() {
    return this.bindValue;
}
set currentValue(value) {
    this.$emit('valueChanged', value);
}

这样做的目的是数据本地化。 在组件内部定义一个currentValue 然后为该值设置get,当访问currentValue等价于访问v-modelprop。 然后设置set。当改变currentValue的值时,此时就会触发对应的事件。 当触发之后父组件中的值就会变化。这就实现了双向数据绑定。

我们可以看到,其实this.currentValue的作用就是v-model操作的语法糖。 它并没有什么特别之处,只是将v-model传入的数据的访问和更改简单化了,都集中与一个值this.currentValue


您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/vuejs20220823.html

网友评论文明上网理性发言 已有0人参与

发表评论: