自定义组件使用 v-model

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huipo22/article/details/79972683

//自定义组件使用 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>
阅读更多

没有更多推荐了,返回首页