vue3 新特性defineOptions和defineModel

一、vue3.3 新特性defineOptions

在Vue3.3之前,组件的默认组件名为.vue单文件组件文件的名字,假如我们想修改组件名,则需要结合Options API进行修改。defineOptions的出现解决了这个问题。

这个宏可以用来直接在 <script setup> 中声明组件选项,而不必使用单独的 <script> 块:

TypeScript 复制代码
<script setup lang="ts">
defineOptions({
  name: '组件名称'
  inheritAttrs: false, // 组件标签上的属性是否透传
  customOptions: {
    /* 其他配置 */
  }
})
</script>

二、vue3.4 新特性defineModel

这个宏可以用来声明一个双向绑定 prop,通过父组件的 v-model 来使用。组件 v-model指南中也讨论了示例用法。

在底层,这个宏声明了一个 model prop 和一个相应的值更新事件。如果第一个参数是一个字符串字面量,它将被用作 prop 名称;否则,prop 名称将默认为 "modelValue"。在这两种情况下,你都可以再传递一个额外的对象,它可以包含 prop 的选项和 model ref 的值转换选项

1、简介

defineModel() 返回的值是一个 ref 。它可以像其他 ref 一样被访问以及修改,不过它能起到在父组件和当前变量之间的双向绑定的作用:

  • 它的 value 和父组件的 v-model 的值同步;
  • 当它被子组件变更了,会触发父组件绑定的值一起更新。

2、底层机制

defineModel 是一个便利宏。 编译器将其展开为以下内容:

  • 一个名为 modelValue 的 prop,本地 ref 的值与其同步;
  • 一个名为 update:modelValue 的事件,当本地 ref 的值发生变更时触发。

3、默认v-model

父组件Parent.vue

javascript 复制代码
<template>
  <Child v-model="value"></Child>
</template>
<script setup lang="ts">
import { ref } from "vue";
const value = ref("");
</script>

子组件Child.vue

1、vue3.4前用法

TypeScript 复制代码
<template>
  <input
    :value="modelValue"
    @input="emit('update:modelValue', $event.target.value)"
  />
</template>
<script setup lang="ts">
const props = defineProps(["modelValue"]);
const emit = defineEmits(["update:modelValue"]);
</script>

2、vue3.4用法

TypeScript 复制代码
<!-- vue3.4用法 -->
<template>
  <input type="text" v-model="model" />
</template>
<script setup lang="ts">
// model变量名称可随意取
const model = defineModel();
</script>

4、带参数的v-model

父组件Parent.vue

TypeScript 复制代码
<template>
  <Child v-model:date="dateValue"></Child>
</template>
<script setup lang="ts">
import { ref } from "vue";
const dateValue = ref("");
</script>

子组件Child.vue

1、vue3.4前用法

TypeScript 复制代码
<template>
  <input
    type="text"
    :value="date"
    @input="emit('update:date', $event.target.value)"
  />
</template>
<script setup lang="ts">
const props = defineProps(["date"]);
const emit = defineEmits(["update:date"]);
</script>

2、vue3.4用法

TypeScript 复制代码
<template>
  <input type="text" v-model="date" />
</template>
<script setup lang="ts">
const name = defineModel("date");
</script>

5、同时绑定多个v-model

父组件Parent.vue

TypeScript 复制代码
<template>
  <Child v-model:date="dateValue" v-model:address="dateTimeValue"></Child>
</template>
<script setup lang="ts">
import { ref } from "vue";
const dateValue = ref("");
const dateTimeValue = ref("");
</script>

子组件Child.vue

1、vue3.4前用法

TypeScript 复制代码
<template>
  <input
    type="text"
    :value="date"
    @input="$emit('update:date', $event.target.value)"
  />
  <input
    type="text"
    :value="dateTime"
    @input="$emit('update:dateTime', $event.target.value)"
  />
</template>
<script setup lang="ts">
defineProps(["date", "dateTime"]);
defineEmits(["update:date", "update:dateTime"]);
</script>

2、vue3.4用法

TypeScript 复制代码
<template>
  <input type="text" v-model="dateValue" />
  <input type="text" v-model="dateTime" />
</template>
<script setup lang="ts">
const dateValue = defineModel("date");
const dateTimeValue = defineModel("dateTime");
</script>
相关推荐
LRH12 分钟前
React 架构设计:从 stack reconciler 到 fiber reconciler 的演进
前端
不一样的少年_15 分钟前
【前端效率工具】:告别右键另存,不到 50 行代码一键批量下载网页图片
前端·javascript·浏览器
golang学习记15 分钟前
从0死磕全栈之Next.js 企业级 next.config.js 配置详解:打造高性能、安全、可维护的中大型项目
前端
1024小神18 分钟前
next项目使用状态管理zustand说明
前端
Asort18 分钟前
JavaScript设计模式(八):组合模式(Composite)——构建灵活可扩展的树形对象结构
前端·javascript·设计模式
刘永胜是我20 分钟前
【iTerm2 实用技巧】解决两大顽疾:历史记录看不全 & 鼠标滚轮失灵
前端·iterm
returnfalse22 分钟前
🔥 解密StreamParser:让数据流解析变得如此优雅!
前端
凉城a22 分钟前
经常看到的IPv4、IPv6到底是什么?
前端·后端·tcp/ip
jserTang29 分钟前
Cursor Plan Mode:AI 终于知道先想后做了
前端·后端·cursor
木觞清33 分钟前
喜马拉雅音频链接逆向实战
开发语言·前端·javascript