为什么 Vue 的 defineProps 宏函数不需要 import 导入就可用？

前言

我们每天写vue代码时都在用define，但是你有没有思考过下面这些问题。为什么不需要导入？为什么不能在非setup顶层使用？是如何将声明的 props 自动暴露给模板？

举几个例子

我们来看几个例子，分别对应上面的几个问题。

先来看一个正常的例子define，-child.vue文件代码如下：

  
content is {{ content }}



<script setup lang="ts">
defineProps({
  content: String,
});

我们看到在这个正常的例子中没有从任何地方导入，直接就可以使用了，并且在中渲染了props中的。

我们再来看一个在非setup顶层使用的例子，if-child.vue文件代码如下：

  
content is {{ content }}



<script setup lang="ts">
import { ref } from "vue";
const count = ref(10);

if (count.value) {
  defineProps({
    content: String,
  });
}

代码跑起来直接就报错了，提示 is not

通过debug搞清楚上面几个问题

在我的上一篇文章 中已经带你搞清楚了vue文件中的

限时特惠:本站持续每日更新海量各大内部创业课程，一年会员仅需要98元，全站资源免费下载
点击查看详情

站长微信:Jiucxh