Vue 3.3新增了一些语法糖和宏，包括泛型组件、defineSlots、defineEmits、defineOptions defineProps 父组件传参 <template><Child name="my"></Child></template><script setup lang="ts">import Child from "./views/Child.vue";</sc

defineOptions() 3.3 版本以上才可以使用 引言： 在使用组件时候 默认情况下，父组件传递的，但没有被子组件解析为 props 的 attributes 绑定会被**“透传”**。这意味着当我们有 一个单根节点(多根节点的是无法透传的) 的子组件时，这些绑定会被作为一个常规的 HTML attribute 应用在子组件的根节点元素上。 当你编写的组件想要在一个目标元素或其他组件

一、vue3.3 新特性defineOptions 在Vue3.3之前，组件的默认组件名为.vue单文件组件文件的名字，假如我们想修改组件名，则需要结合Options API进行修改。defineOptions的出现解决了这个问题。 这个宏可以用来直接在 <script setup> 中声明组件选项，而不必使用单独的 <script> 块：  <script setup lang="t

新特性主要围绕着父子组件之间的相关的功能更新。 本文主要以代码展示的风格来介绍功能。大家可以直接搞个父子组件，把对应代码复制粘贴进去，然后一个个试验即可。自己也动动手，加深理解。 除了标题的4个宏指令，还有 toRef 和 toValue，但让我挺无语的。。感觉没啥用，求指教。。 以下案例包含的vue3.3新内容： defineOptions、defineModel、defi

defineOptions 背景说明： 有 <script setup> 之前，如果要定义 props,  emits 可以轻而易举地添加一个与 setup 平级的属性。 但是用了 <script setup>  后，就没法这么干了 setup 属性已经没有了，自然无法添加与其平级的属性。 为了解决这一问题，引入了 defineProps  与  defineEmits 这两个宏。但这只解决

在vue2当中我们可以通过name属性来指定组件的名称，这个name会显示在vue调试工具当中，方便我们进行调试；当我们想实现一个无限递归的菜单组件时，也需要用到这个name属性，没有name属性的组件是无法递归的。 在vue3当中，当使用setup语法糖时，我们没有办法在script当中添加一个name属性，但是可以采取其他的方式来实现，代码如下： 使用两个script块 <script

问题说明 当我们在 使用 <script setup> 组合式 API的时候，发现我们并没有给组件指定它的名称。此时它实际上使用的是 文件的名称 作为组件的名称。例如 ： 组件文件是 【componentABC.vue】那么这个组件的默认名称就是 【componentABC】.现在我们如何显式地为组件指定一个名称呢？下面就是本文要介绍的解决方案： 解决方案一 在 vue3 中，提

defineOptions 问题：用了<script setup>后，就无法添加与其平级的属性了，比如定义组件的name或其他自定义的属性。 为了解决这一问题，引入了defineProps与defineEmits这两个宏，但这只解决了props与emits这两个属性。如果要定义其他的平级属性，还是得回到最原始的用法--就再添加一个普通的<script>标签。这样就会存在两个<script>标签

Vue3.3 新特性-defineOptions 背景说明： 有 <script setup> 之前，如果要定义 props, emits 可以轻而易举地添加一个与 setup 平级的属性。 但是用了 <script setup> 后，就没法这么干了 setup 属性已经没有了，自然无法添加与其平级的属性。 为了解决这一问题，引入了 defineProps 与 defineEmits 这两个宏