Vue3 defineProps` / `defineEmits` 是编译器宏，不需要手动 import 导入

雪芽蓝域zzs2026-09-08 10:10

警告解读

复制代码

`defineEmits` is a compiler macro and no longer needs to be imported.
`defineProps` is a compiler macro and no longer needs to be imported.

翻译：defineProps / defineEmits 是编译器宏，不需要手动 import 导入。

哪里会触发警告

在<script setup>里面写了下面这种错误代码：

复制代码

<script setup>
// ❌错误！不要import
import { defineProps, defineEmits } from 'vue'

const props = defineProps({ ... })
const emit = defineEmits(['xxx'])
</script>

Vue3 <script setup>环境下，defineProps、defineEmits是编译器自动注入的全局宏，直接写，不需要 import。

✅正确写法

复制代码

<script setup>
// ✅删掉 import { defineProps, defineEmits } from 'vue'
const props = defineProps({
  imgSrc:{
    type:[String,Object],
    default:''
  }
})
const emit = defineEmits(['update:modelValue'])
</script>

排查步骤

在项目全局搜索 import { defineProps，找到写了这句的 vue 组件，把这两个从 import 里面删掉。
重启 pnpm dev，终端黄色警告就消失。

顺带看你的 useErrorView.js

复制代码

import { computed } from 'vue'
import defaultImg from '@/assets/images/error/img_404.png'

export function useErrorView(props) {
  const finalImgSrc = computed(() => {
    return props.imgSrc || defaultImg
  })

  return {
    finalImgSrc
  }
}

调用示例（vue 组件）

复制代码

<script setup>
import { useErrorView } from '@/composables/useErrorView'

const props = defineProps({
  imgSrc: {
    type: [String, Object],
    default: ''
  }
})

const { finalImgSrc } = useErrorView(props)
</script>

注意：必须把组件的props作为参数传给 composable 函数 ，不能在 composable 内部直接defineProps，defineProps只能在 vue 单文件顶层使用。

小补充

类似的宏还有：defineOptions、defineModel，全部都不要 import。

终端那个局域网地址 http://172.26.208.1:3981/ 是 vite 暴露给局域网其他设备访问的地址，属于正常输出。