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

weixin_459793102024-05-01 11:14

文章目录

- - 父组件
  - [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>