自定义组件使用 v-model

//自定义组件使用 v-model

因此,对于一个带有 v-model 的组件,它应该如下:
1. 接收一个 value prop
2.触发 input 事件,并传入新值

// user.vue组件
<template>
    <select v-model="text">
      <option :value="user.id" v-for="user in userList">
        {{user.name}}
      option>
    select>
template>
<script>
export default {
  props: ['value'], // 接收一个 value prop
  computed: {
    userList() {
        //获取数据
    },
    text: {
      get: function() {
        return this.value;
      },
      set: function(val) {
        this.$emit("input", val);// 利用 $emit 触发 input 事件
      }
    },
  },
};
script>

你可能感兴趣的:(vue,前端)