Vue文档-使用自定义事件的表单输入组件案例解析

最新推荐文章于 2023-12-21 22:15:00 发布

KateCateCake

最新推荐文章于 2023-12-21 22:15:00 发布

阅读量492

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/KateCateCake/article/details/79805581

vue 专栏收录该内容

1 篇文章

订阅专栏

本文通过一个具体的Vue自定义组件案例，介绍了如何利用自定义事件实现非表单元素的v-model双向绑定效果，包括如何设置value属性及input自定义事件。

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

看使用自定义事件的表单输入组件这一节时，最初有不少困惑，反复看了几遍之后有点点眉目。

代码如下：

Vue.component('currency-input', {
    template: `
      <span>
        $<input
            ref="input"
            v-bind:value="value"
            v-on:input="undateValue($event.target.value)"
        >
      </span>
    `,
    props: ['value'],
    methods: {
        undateValue: function (value) {
            var formattedValue = value.trim().slice(0, value.indexOf('.') === -1 ? value.length : value.indexOf('.') + 3)
            if (formattedValue !== value) {
                this.$refs.input.value = formattedValue;
            }
            this.$emit('input', Number(formattedValue))
        }
    }
})

let evt1 = new Vue({
    el: '#evt1',
    data: {
        counter: 0,
        price: 12
    }
})

   <div id="evt1">
        <currency-input v-model="price"></currency-input>
    </div>

对于这个案例来说，文档是想让我们理解，在非表单元素中如何使用v-model并实现v-model的效果。（一般来说，v-model是针对表单的）
首先讲述了v-model的原理。

<input
  v-bind:value="something"
  v-on:input="something = $event.target.value">
  // 对于一般组件而言
  <custom-input
  v-bind:value="something"
  v-on:input="something = arguments[0]">
</custom-input>

v-model只是一个语法糖，将某个变量绑定在value属性上，并且监听input事件。
非表单元素不能直接使用v-model的原因在于，不存在value属性和input事件，所以通常也没必要这么写。
但是当某个自定义组件内部包含表单元素时，可以通过自定义事件来模拟这种效果。（因为非表单元素不存在input事件，所以对于非表单元素来说，input就是自定义事件，可以通过this. $emit(‘input’)来触发）。自定义组件设置了v-model之后，给子组件传入了value属性，自身绑定了一个input自定义事件。然后子组件的表单元素中写bind和on:input，使用这两个而不直接使用v-model的原因在于，想在input时，对数据进行一些处理，比如格式化，比如触发父组件的input的事件。arguments[0]就是this.$ emit时，传进去的参数。