在vue自定义组件中使用 v-model指令详情

下面是详细讲解“在vue自定义组件中使用 v-model指令”的攻略。

什么是v-model

v-model 指令在表单元素上创建了双向数据绑定。当表单元素的值发生变化时，其绑定的数据也会跟着变化；反之，当数据发生变化时，表单元素的值也会跟着变化。v-model在vue中非常常用。

在Vue自定义组件中使用v-model

在 Vue 自定义组件中使用 v-model 其实跟在输入框中使用 v-model 一样简单，只需要在组件中的 model 选项里声明属性名和事件名即可，在组件中通过 $emit 触发事件来更新父组件中绑定的数据。

一个自定义组件的 v-model 可以使用以下三个名字中的一个来定义：

• value作为组件 prop 的值，用于显示传入的值
• input作为组件事件的名称，用于更新传入的值
• change选择性地作为组件事件的名称，用于在 <input> 元素的 change 事件触发时更新传入的值

下面是实现自定义组件的完整步骤：

1. 在父组件中使用 v-model 指令，将一个属性绑定到子组件的 prop 上：

<template>
  <div>
    <custom-input v-model="inputValue"></custom-input>
    <p>{{inputValue}}</p>
  </div>
</template>

<script>
import CustomInput from "./CustomInput.vue";
export default {
  components: {
    CustomInput
  },
  data() {
    return {
      inputValue: "Hello World"
    };
  }
};
</script>

1. 在子组件中使用model选项声明属性和事件：

<template>
  <div>
    <input :value="value" @input="$emit('input', $event.target.value)" />
  </div>
</template>

<script>
export default {
  name: "CustomInput",
  props: ["value"]
};
</script>

在这个例子中，我们声明 value 作为子组件的 prop，然后在使用 v-model 的地方绑定 inputValue，其中的 v-model 相当于以下代码：

<custom-input :value="inputValue" @input="inputValue = $event"></custom-input>

同时，在子组件中使用 model 选项，它将绑定到父组件的 inputValue 属性和 input 事件：

<input :value="value" @input="$emit('input', $event.target.value)" />

这里内部的 value ，会自动启用 props ，所以会与 CustomInput 组件的 value 绑定，这里建议使用 props 属性来作为初始值传递。

示例1

为了更好的理解，我们用一个实际的例子来演示如何使用 v-model 定义一个自定义的表单控件。

下面是一个匹配密码的表单控件，它包含两个输入框：

// PasswordMatch.vue
<template>
  <div>
    <input type="password" :value="password" @input="$emit('input', $event.target.value)" placeholder="Password">
    <input type="password" :value="confirmPassword" @input="$emit('update:confirmPassword', $event.target.value)" placeholder="Confirm Password">
  </div>
</template>

<script>
export default {
  name: 'PasswordMatch',
  props: {
    value: {
      type: String,
      default: ''
    },
    confirmPassword: {
      type: String,
      default: ''
    }
  },
  model: {
    prop: 'value',
    event: 'input'
  }
}
</script>

在这个例子中，我们定义了两个输入框：一个是 password 输入框，另一个是 confirmPassword 输入框。

我们通过 v-model 指令将 password 的值与父组件中的一个变量 password 绑定，同时将 confirmPassword 的值绑定到一个自定义 prop confirmPassword 上。

这里我们使用 update: 前缀来声明一个自定义事件，以支持 v-model 的双向绑定功能，并在改变 confirmPassword 的值时触发此事件。

父组件使用该控件时，如下所示：

<template>
  <div>
    <label>Password: </label><br>
    <password-match v-model="password" :confirmPassword="confirmPassword"></password-match>
    <br><br>
    <button @click="submit">Submit</button>
  </div>
</template>

<script>
import PasswordMatch from './PasswordMatch.vue';
export default {
  name: 'App',
  components: { PasswordMatch },
  data() {
    return {
      password: '',
      confirmPassword: ''
    };
  },
  methods: {
    submit() {
      alert(`Password: ${this.password}\nConfirm Password: ${this.confirmPassword}`);
    }
  }
}
</script>

在这个例子中，我们使用了 v-model 将父组件中的 password 变量绑定到 PasswordMatch 组件的 password 属性上，并将父组件中的 confirmPassword 变量作为 PasswordMatch 组件的 confirmPassword 属性传递。

当用户更改 password 或 confirmPassword 的值时，父组件中的变量也会随之改变。这样，我们就实现了一个简单的双向绑定的表单控件。

示例2

下面是一个简单的应用场景，在这个场景中，我们需要创建一个选择框，其中包含多个选项。在选择框中选中一个选项后，我们需要在父组件中获取所选选项的值。

// SelectBox.vue
<template>
  <div>
    <select :value="selected" @change="$emit('change', $event.target.value)">
      <option :value="null" disabled>Select a fruit</option>
      <option v-for="option in options" :value="option.id" :key="option.id">{{ option.name }}</option>
    </select>
  </div>
</template>

<script>
export default {
  name: 'SelectBox',
  props: {
    options: { 
      type: Array,
      default: () => []
    },
    value: {},
  },
  computed: {
    selected: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit('input', value);
      }
    }
  }
}
</script>

在这个例子中，我们使用 v-model 将选择框的值绑定到父组件中的一个变量中。

我们使用 computed 属性来处理 v-model 的双向绑定。通过定义 selected 属性，我们可以在设置和获取时触发 $emit('input', value) 事件。

父组件使用该控件时，如下所示：

<template>
  <div>
    <label>Select a fruit: </label>
    <select-box v-model="selectedFruit" :options="fruits"></select-box>
    <br>
    <br>
    <p>You have selected: {{ selectedFruit }}</p>
  </div>
</template>

<script>
import SelectBox from './SelectBox.vue';
export default {
  name: 'App',
  components: { SelectBox },
  data() {
    return {
      selectedFruit: null,
      fruits: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ]
    };
  }
}
</script>

在这个例子中，我们通过 v-model 绑定了父组件中的 selectedFruit 变量到 SelectBox 组件的 value。

当用户选择一个水果时，selectedFruit 变量的值也会更新。

这就是在 Vue 自定义组件中使用 v-model 的完整攻略。