Vue2和Vue3自定义组件使用v-model

最新推荐文章于 2024-08-19 15:53:46 发布

小五Five

最新推荐文章于 2024-08-19 15:53:46 发布

阅读量281

点赞数

分类专栏： vue 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_42373175/article/details/129850714

版权

vue 专栏收录该内容

28 篇文章 2 订阅

订阅专栏

文章详细对比了Vue2和Vue3中自定义组件如何处理v-model的情况。在Vue2中，通过props接收值并使用$emit触发changeActive事件。而在Vue3中，v-model绑定变为modelValue，更新方法固定为@update:modelValue。此外，还介绍了在Vue3中使用计算属性和setup语法实现v-model的另一种方式。

摘要由CSDN通过智能技术生成

Vue2

父组件：v-model

自定义组件：props接收+model对象里写prop和event+method里写具体方法

// 子组件
<el-tabs :value="active" @tab-click="handleClick">
  <el-tab-pane v-for="(item, key) in list" :key="key" :label="item.name" :name="item.value"></el-tab-pane>
</el-tabs>
...
export default {
  name: 'SearchTab',
  props: {
    active: {
      type: Number,
      default: 0
    },
    list: Array
  },
  // 这里接收v-model绑定的数据
  model: {
    prop: 'active',
    event: 'changeActive'
  },
  methods: {
    handleClick(val) {
      this.$emit('changeActive', val.name)
    }
  }
}

Vue3

父组件：v-model

自定义组件：v-model默认绑定的不是value，而是modelValue。发射的方法固定位为@update：modelValue。

// 子组件
<template>
    <input type="text" :value="modelValue" @input="onInput">
</template>
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
    name:'ChildInput',
    props:{
        // 只能写modelValue
        modelValue:{
            type:String
        }
    },
    setup(props, context){
        const onInput = (e: Event) =>{
            context.emit('update:modelValue',e.target.value)
        }
        return{
            onInput
        }
    }
})
</script>

另一种在组件内实现 v-model 的方式是使用一个可写的，同时具有 getter 和 setter 的 computed 属性。get 方法需返回 modelValue prop，而 set 方法需触发相应的事件。

// 子组件
<script setup>
import { computed } from 'vue'

const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

const value = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})
</script>

<template>
  <input v-model="value" />
</template>

欢迎留言讨论~