在组件上使用v-model

该文章由 leevare 发布于 ,归类于 Javascript

v-model最常见的用法是在输入框上,输入的值会自动更新到对应的属性中去。这里的v-model其实是一个语法糖,官方也有介绍。在input上使用v-model和下面这样写是等价的。

<input @input="inputValue = $event.target.value" :value="inputValue" />

基于这个思想,在vue2.2以上的版本中,在组件上也可以使用v-model属性了,官方介绍

那么,自己封装一个input的组件custom-input,就可以按照下面这样。

<input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" >

那么在custom-input上就可以使用v-model

<custom-input v-model="searchText"></custom-input>

就相当于在custom-input上监听了input事件,并且将抛过来的值自动赋值到searchText中去。

那么,如果不是input的话,其他的组件就要进行一些定制了。比如select。它的值改变是发生在change的时候,所以我希望监听它的change事件,而且我想直接传递selected到子组件中表示哪个选项选中。所以,需要对其进行一些定制

<template>
  <select :value="selected" @change="emitChange($event.target.value)">
    <template v-for="option in selectData">
      <option :value="option.value">{{option.text}}</option>
    </template>
  </select>
</template>

export default {
  name: 'mySelect',
  model: {
    prop: 'selected',
    event: 'change',
  },
  props: {
    selectData: {
      type: Array,
      default: () => [],
    },
    selected: {
      type: [String, Number],
    },
  },
  methods: {
    emitChange(value) {
      this.$emit('change', value);
    },
  },
};

此处的model表示获取的selected的值,并且在父组件上使用v-model的话,会自动监听其change事件,并自动赋值。

在父组件上

<my-select v-model="selectItem" :selectData="selectData"></my-select>

综合input的样例,这里就可以理解为

<my-select @change="change" :selected="selected" :selectData="selectData"></my-select>

<script>
export default {
  data() {
    return {
      selectItem: '',
      selected: '',
    };
  },
  methods: {
    change(value) {
      this.selectItem = value;
      this.selected = value;
    },
  },
};
</script>

有了v-model,能让我们省不少代码。

关于v-model就这些,属于本人的粗俗理解,如果不正之处,欢迎指正。

如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!

相关文章:

说点什么

avatar
300
  Subscribe  
提醒