vue3的v-model在组件上几种用法

文章目录

      • 父组件
      • [1、@update和 : 拆开使用](#1、@update和 : 拆开使用)
      • [2、computed 计算属性方法](#2、computed 计算属性方法)
      • [3、defineModel (3.4+) 官方推荐](#3、defineModel (3.4+) 官方推荐)
      • 4、TS泛型用法(3.3+)

父组件

js 复制代码
<template>
  <div>
    <button @click="dialogVisible = !dialogVisible">打开/关闭</button>
	<ModalComp v-model="dialogVisible" v-if="dialogVisible" />
  </div>
</template>

<script setup>
import ModalComp from './components/ModalComp.vue'

const dialogVisible = ref(false)

</script>

1、@update和 : 拆开使用

js 复制代码
<template>
  <el-dialog
	:modelValue="modelValue"
    @update:modelValue="$emit('update:modelValue', false)"
    title="Tips"
    width="800"
    draggable
  >
	哈咯啊
  </el-dialog>
</template>

<script setup>

defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})

</script>

2、computed 计算属性方法

js 复制代码
<template>
  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="800"
    draggable
  >
	哈咯啊
  </el-dialog>
</template>

<script setup>

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['update:modelValue'])

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

</script>

3、defineModel (3.4+) 官方推荐

js 复制代码
<template>
  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="800"
    draggable
  >
	哈咯啊
  </el-dialog>
</template>

<script setup>

const dialogVisible = defineModel({ // 第一个参数'dialogVisible', 可选
  type: Boolean,
  required: true,
  default: false,
})

</script>


// 在vite.config.ts中配置 defineModel:true
export default defineConfig({
  plugins: [
    vue({
      script:{
        defineModel: true
      }
    }),
    vueJsx(),
  ],
})

4、TS泛型用法(3.3+)

js 复制代码
<script setup>

const emit = defineEmits<{
  "update:modelValue":[value:boolean]
}>()

//用法: emit('update:modelValue', val)
// 在v-model:count(指定字段)时,好用。

</script>
相关推荐
qyresearch_10 分钟前
射频前端MMIC:5G时代的技术引擎与市场机遇
前端·5g
天蓝色的鱼鱼14 分钟前
Next.js 渲染模式全解析:如何正确选择客户端与服务端渲染
前端·react.js·next.js
一枚前端小能手20 分钟前
🚀 巨型列表渲染卡顿?这几个优化技巧让你的页面丝滑如德芙
前端·javascript
酷柚易汛智推官20 分钟前
Electron技术深度解析:跨平台桌面开发的利器与挑战
前端·javascript·electron
llz_11226 分钟前
第五周作业(JavaScript)
开发语言·前端·javascript
yannick_liu36 分钟前
nuxt4 + nuxt-swiper实现官网全屏播放
前端
苏打水com39 分钟前
JS基础事件处理与CSS常用属性全解析(附实战示例)
前端
W.Y.B.G41 分钟前
JavaScript 计算闰年方法
开发语言·前端·javascript
渣哥1 小时前
你以为只是名字不同?Spring 三大注解的真正差别曝光
javascript·后端·面试
小六路1 小时前
可以横跨时间轴,分类显示的事件
前端·javascript·vue.js