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>
相关推荐
kadog几秒前
《Python3网络爬虫开发实战(第二版)》配套案例 spa6
开发语言·javascript·爬虫·python
徒慕风流1 分钟前
利用Python爬虫实现百度图片搜索的PNG图片下载
开发语言·爬虫·python
珎珎啊1 分钟前
uniapp+vue3移动端实现输入验证码
前端·javascript·uni-app
钢铁男儿21 分钟前
C# 实战_RichTextBox选中某一行条目高亮,离开恢复
开发语言·c#
HtwHUAT29 分钟前
五、web自动化测试01
前端·css·chrome·python·功能测试·selenium·html
86Eric32 分钟前
Vue 中 使用 Mixins 解决 多页面共用相同组件的相关问题
前端·javascript·vue.js·mixins·公用组件
依旧阳光的老码农35 分钟前
Windows下使用 VS Code + g++ 开发 Qt GUI 项目的完整指南
开发语言·windows·qt
等什么君!38 分钟前
SpringMVC处理请求映射路径和接收参数
java·开发语言·spring
qq_252496399643 分钟前
react 子组件暴露,父组件接收
前端·javascript·react.js
曹牧1 小时前
Java:XML被自动转义
xml·java·开发语言