vue 自定义组件实现 v-model 效果

最新推荐文章于 2025-06-20 11:20:33 发布

BraggTroy

最新推荐文章于 2025-06-20 11:20:33 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/BraggTroy/article/details/88655576

vue 专栏收录该内容

5 篇文章

订阅专栏

博客围绕Vue展开，但具体内容缺失，推测可能涉及Vue在前端开发中的应用、特性等信息技术相关内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件写法：
<level-select v-model="value"></level-select>

子组件写法：

<template>
  <Select :value="level" @on-change="change">
    <Option v-for="l in levels" :value="l.value" :key="'key' + l.value">{{l.label}}</Option>
  </Select>
</template>

<script>
  export default {
    name: 'levelSelect',
    data () {
      return {
        levels: [
          {label: '一级', value: 1},
          {label: '二级', value: 2},
          {label: '三级', value: 3},
          {label: '四级', value: 4}
        ]
      }
    },
    model: {
      prop: 'level',
      event: 'up'
    },
    props: {
      level: null
    },
    methods: {
      change (v) {
        this.$emit('up', v)
      }
    }
  }
</script>