Vue3.0组件之间通信（defineProps 和 defineEmits 及 defineExpose）

最新推荐文章于 2025-09-27 21:59:35 发布

原创

最新推荐文章于 2025-09-27 21:59:35 发布 · 1.1k 阅读

标签

#前端 #javascript #开发语言

收录于

前言：

一、父传子 defineProps
二、子传父 defineEmits
三、子组件暴露属性和方法给父组件 defineExpose
四、依赖注入Provide / Inject

在 <script setup> 中必须使用 defineProps 和 defineEmits API 来声明 props 和 emits ，它们具备完整的类型推断并且在 <script setup> 中是直接可用的。

<template> 
   <!-- 在模板中直接使用 props 中声明的变量 --> 
   <h1>{
  
  { msg }}</h1> 
   <div>{
  
  { title }}</div> 
</template>

<script setup>
const props = defineProps({ 
  msg: String, 
  title: { 
    type: String, 
    default: '我是标题' 
  }, 
  list: { 
    type: Array, 
    default: () => [] 
  } 
});
console.log(props.msg);   //使用props中的属性

const emits = defineEmits(['change', 'delete']);
</script>

1. defineProps 和 defineEmits 、defineExpose 都是只能在 <script setup> 中才能使用，他们不需要被导入即可使用，并且会在编译 <script setup> 语法块时一同被编译。

2. defineProps 接收与 props 选项相同的值，defineEmits