网站首页> 前端开发> JavaScript> vue原生input输入框原理剖析

vue原生input输入框原理剖析

时间:2022-08-22 19:32:09 阅读:270次 来源:互联网

首先我们来看一段代码:

<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。 子组件想要使用的话,需要定义一个名为value的prop才能使用。 而在子组件中更改该值,只需要定义一个函数,有必要的时候执行 this.$emit('input', newValue) 即可。

这里的newValue就是$event。 这样就可以改变对应的值。 当然除了默认的value和input的命名,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-model的prop。 然后设置set。当改变currentValue的值时,此时就会触发对应的事件。 当触发之后父组件中的值就会变化。这就实现了双向数据绑定。

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

本文地址:https://www.manongw.com/article/375.html

文章来源:转载于掘金,转载网址为https://juejin.cn/post/7134157370472546341

版权申明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 ezhongheng@126.com 举报,一经查实,本站将立刻删除。

相关文章
  • 本文主要介绍了JS pushlet XMLAdapter适配器用法案例解析的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-16 18:00
  • 本文主要介绍了JSON stringify方法原理及实例解析的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-24 10:11
  • 本文主要介绍了使用TS来编写express服务器的方法步骤的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-30 09:26
  • 本文主要介绍了详解JavaScript 高阶函数的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-05 08:47
  • 本文主要介绍了详解webpack的clean-webpack-plugin插件报错的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-16 18:06
  • 本文主要介绍了JavaScript setTimeout()基本用法有哪些的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-04 22:05
  • 本文主要介绍了原生JS实现弹幕效果的简单操作指南的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-10 16:04
  • 本文主要介绍了JS实现简单贪吃蛇小游戏的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-29 08:59
  • 本文主要介绍了JavaScript实现串行请求的示例代码的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-05 08:25
  • 本文主要介绍了JavaScript 实现轮播图特效的示例的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-05 16:59