v-model绑定一个对象，组件内部分别负责不同字段的场景实现

我们知道v-model对于单个property双向数据绑定非常有用，保持父子组件之间的数据传递和同步，但也有很多场景下希望一个组件能够处理多个数据字段，这时就有一些小小技巧了。

https://simonkollross.de/posts/vuejs-using-v-model-with-objects-for-custom-components

比如，以下为createCustomer组件：

<template>

  <div>

    <div>

      <label>Name</label>

      <input type="text" :value="value.name" @input="update('name', $event.target.value)">

    </div>

    <div>

      <label>Type</label>

      <select :value="value.type" @input="update('type', $event.target.value)">

        <option value="Person">Person</option>

        <option value="Company">Company</option>

      </select>

    </div>

  </div>

</template>

<script>

export default {

  props: ['value'],

  methods: {

    update(key, value) {

      this.$emit('input', { ...this.value, [key]: value })

    },

  },

}

</script>

组件的使用方法:

<CreateCustomer v-model="{ name: 'John Doe', type: 'Person' }"></CreateCustomer>

巴特西

v-model绑定一个对象，组件内部分别负责不同字段的场景实现

最新文章

热门文章