vue自定义组件中使用v-model

vue 自定义组件中使用 v-model

v-model 简单认识

v-model 是 vue 用于数据双向绑定的一个指令。其实它是一个语法糖，本质上包含两个操作：

1. v-bind 绑定一个 value 属性
2. v-on 指令给当前元素绑定 input 事件
   即

<input type="text" v-model="message" />

等同于

<input
  type="text"
  v-bind:value="message"
  v-on:input="message=$event.target.value"
/>

v-model 修饰符：

• .lazy：让数据在失去焦点或者回车时才更新
• .number：输入字符串转为有效的数字
• .trim：输入首尾空格过滤

如何在自定义组件中使用 v-model 指令

通过上述分析，要想在调用自定义子组件中使用 v-model 指令，需要在子组件 props 中增加 value 属性，在数据变化时通过$emit 调用 input 方法。如示例所示。
子组件 mySelect .vue 代码：

<template>
  <el-select v-model="selected" @change="syncValue()" placeholder="请选择">
    <el-option v-for="item in options" :key="item.value" :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    props: {
      // step 1
      value: {
        type: String,
        default: "",
      },
    },
    data() {
      return {
        selected: this.value,
        options: [
          {
            value: "黄金糕1",
          },
          {
            value: "双皮奶1",
          },
        ],
      };
    },
    methods: {
      //step 2
      syncValue() {
        this.$emit("input", this.selected);
      },
    },
  };
</script>

父组件代码：

<template>
  <div id="example">
    <my-select v-model="food"></my-select>
    <span>我选择的食物是：{{ food }}</span>
  </div>
</template>
<script>
import MySelect from './mySelect.vue';
export default {
  components: { MySelect },
  data() {
    return {
      food: ''
    };
  }
};
</script>

运行结果：

value 属性和 input 方法是 v-model 默认的，有时我们可能需要将属性名和方法名更改为其他的值。这时还需要定义 model 属性。

model: { prop: 'food', event: 'select' },
props: { food:{ type: String, default: '' }

子组件 mySelect2.vue 代码：

<template>
  <el-select v-model="selected" @change="syncFood()" placeholder="请选择">
    <el-option v-for="item in options" :key="item.value" :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    model: {
      prop: "food",
      event: "select",
    },
    props: {
      food: {
        type: String,
        default: "",
      },
    },
    data() {
      return {
        selected: this.food,
        options: [
          {
            value: "黄金糕2",
          },
          {
            value: "双皮奶2",
          },
        ],
      };
    },
    methods: {
      syncFood() {
        this.$emit("select", this.selected);
      },
    },
  };
</script>

父组件代码将导入的子组件换为 mySelect2.vue 即可。

import MySelect from "./mySelect2.vue";

运行结果：