关于Vue.js中自定义事件的表单输入组件的理解的理解

时间:2021-01-04 21:07:18

过第二遍vue文档比第一遍顺多了,但还是在自定义事件的表单输入组建这个地方卡住了,为此写篇博客加强理解及备忘。

  自定义事件可以用来创建自定义的表单输入组件,使用 v-model 来进行数据双向绑定。要牢记:

<input v-model='something'>

是一下示例的语法糖:

<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生效,他应该:

1.接受一个value的prop

2.在有新的值时触发 input 事件并将新值作为参数

OK,以上是官方文档的说法,可以说解释的很清晰,但也不是很清晰。

下面是官方文档给的栗子:

<currency-input v-model='price'><currency-input>   <!--这里是引入currency-input,并进行数据双向绑定-->
Vue.component('currency-input', {
  template: '\
    <span>\
      $\
      <input\
        ref="input"\
        v-bind:value="value"\
        v-on:input="updateValue($event.target.value)"\
      >\
    </span>\
  ',
  props: ['value'],
  methods: {
    // 不是直接更新值,而是使用此方法来对输入值进行格式化和位数限制
    updateValue: function (value) {
      var formattedValue = value
        // 删除两侧的空格符
        .trim()
        // 保留 2 位小数
        .slice(
          0,
          value.indexOf('.') === -1
            ? value.length
            : value.indexOf('.') + 3
        )
      // 如果值尚不合规,则手动覆盖为合规的值
      if (formattedValue !== value) {
        this.$refs.input.value = formattedValue
      }
      // 通过 input 事件带出数值
      this.$emit('input', Number(formattedValue))
    }
  }
})

首先在引入子组件的时候发现子组件里的props['value']父组件并没有绑定值,双向绑定了v-model='price'  前面也有说到过,在组件中v-model='something' 是一下的语法糖:

<custom-input
    v-bind:value = 'something' v-on:input = 'something = arguments[0]'> <custom-input>
那么v-model='price'反应在栗子中就是:
<currency-input v-bind:value='price' v-on:input='price = arguments[0]'><currency-input>
那么 props['value'] 就 有值了,就是price,定义组件中的input绑定的value属性只是属性,并不是props['value']中的value,v-bind:value='value'中引号下的value才是获得父
组件price值的
props['value']中的value,这一点一定要搞清楚。
后面就是$on 和$emit的事件监听和触发事件了,就不多做解释