vue3从精通到入门13:组件的传参方式

组件传参主要通过 props、emits、slots、provide/inject 以及 setup 函数中的 context 来实现。当使用 <script setup> 语法时,传参方式会更加简洁和直观。

1. props

props 是父组件向子组件传递数据的主要方式。我们可以使用 defineProps 函数来声明 props。

子组件childComponent:

html 复制代码
<script setup lang="ts">  
import { defineProps } from 'vue'  
  
const props = defineProps({  
  msg: String,  
  count: {  
    type: Number,  
    default: 0  
  }  
})  
</script>  
  
<template>  
  <div>{{ msg }} (Count: {{ count }})</div>  
</template>

父组件:

html 复制代码
<ChildComponent msg="Hello" :count="5" />

2. Emits

Emits 用于子组件向父组件发送消息或触发事件。可以使用 defineEmits 函数来声明可触发的事件。

子组件:

html 复制代码
<script setup lang="ts">  
import { defineEmits } from 'vue'  
  
const emit = defineEmits(['updateCount'])  
  
function increment() {  
  emit('updateCount', count + 1)  
}  
</script>  
  
<template>  
  <button @click="increment">Increment</button>  
</template>

父组件:

html 复制代码
<ChildComponent @updateCount="handleUpdateCount" />

3. Slots

Slots 允许你在父组件中向子组件的模板中插入内容。

子组件:

html 复制代码
<template>  
  <div>  
    <slot name="header"></slot>  
    <slot></slot>  
  </div>  
</template>

父组件:

html 复制代码
<ChildComponent>  
  <template #header>  
    <h1>This is the header</h1>  
  </template>  
  <p>This is the default slot content.</p>  
</ChildComponent>

4. Provide / Inject

Provide 和 Inject 允许祖先组件向其所有子孙组件提供一个依赖,而不论组件层次有多深。

祖先组件:

html 复制代码
<script setup lang="ts">  
import { provide } from 'vue'  
  
provide('themeColor', 'blue')  
</script>

子组件:

html 复制代码
<script setup lang="ts">  
import { inject } from 'vue'  
  
const themeColor = inject('themeColor', 'defaultColor')  
</script>

5. Context

<script setup> 中,你通常不需要直接访问 setup 函数的 context 参数,因为大部分功能(如 attrs、slots、emit 等)都已被直接暴露为顶层的绑定。但如果你确实需要访问完整的 context,你可以通过 useContext 函数来获取。

html 复制代码
<script setup lang="ts">  
import { useContext } from 'vue'  
  
const { attrs, slots, emit } = useContext()  
</script>
相关推荐
知识分享小能手1 分钟前
uni-app 入门学习教程,从入门到精通,uni-app 基础知识详解 (2)
前端·javascript·windows·学习·微信小程序·小程序·uni-app
0110_10246 分钟前
tauri + rust的环境搭建---初始化以及构建
开发语言·后端·rust
会开花的二叉树7 分钟前
C++微服务 UserServer 设计与实现
开发语言·c++·微服务
文心快码BaiduComate9 分钟前
限时集福!Comate挂件/皮肤上线,符(福)气掉落中~
前端·后端·程序员
勇敢di牛牛9 分钟前
vue3 + mars3D 三分钟画一个地球
前端·vue.js
像风一样自由202011 分钟前
Rust Tokio vs Go net/http:云原生与嵌入式生态选型指南
开发语言·golang·rust
DuHz13 分钟前
C程序中的数组与指针共生关系
linux·c语言·开发语言·嵌入式硬件·算法
我星期八休息16 分钟前
C++智能指针全面解析:原理、使用场景与最佳实践
java·大数据·开发语言·jvm·c++·人工智能·python
大猫会长21 分钟前
docker安装php+apache
java·开发语言
道之极万物灭35 分钟前
Go小工具合集
开发语言·后端·golang