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

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

1. props

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

子组件childComponent:

<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>

父组件:

<ChildComponent msg="Hello" :count="5" />

 2. Emits

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

子组件:

<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>

父组件:

<ChildComponent @updateCount="handleUpdateCount" />

3. Slots

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

子组件:

<template>  <div>  <slot name="header"></slot>  <slot></slot>  </div>  
</template>

父组件:

<ChildComponent>  <template #header>  <h1>This is the header</h1>  </template>  <p>This is the default slot content.</p>  
</ChildComponent>

4. Provide / Inject

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

祖先组件:

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

子组件:

<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 函数来获取。

<script setup lang="ts">  
import { useContext } from 'vue'  const { attrs, slots, emit } = useContext()  
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/796584.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

沐瞳科技一面 客户端开发(45min)

自我介绍 Unity编译方式&#xff08;Mono与IL2CPP区别&#xff09; C#值类型和引用类型的区别 ref和out参数区别 C#装拆箱 C#委托与接口 Unity项目问答 合批了解吗 行为树与状态机的差异 对象池实现 对象池解决了什么问题 熟悉哪些设计模式 观察者模式讲讲 事件管…

重装系统之后,电脑连网卡都没反应怎么办?

前言 有些电脑比较奇葩&#xff0c;安装完成之后会出现网卡连驱动都没有&#xff0c;这时候要安装电脑驱动可是真的烦躁。怎么下手呢&#xff1f; 如果确定电脑的网卡型号还好&#xff0c;直接找个电脑下载个对应的网卡驱动&#xff0c;用U盘复制过去就能安装。 但如果不知道…

内网安全之域内密码喷洒

域内密码喷洒一般和域内用户名枚举一起使用&#xff0c;可以在无域内凭据的情况下&#xff0c;通过枚举出域内存在的用户名&#xff0c;进而对域内存在的用户名进行密码喷洒&#xff0c;以此来获得域内有效凭据。 在Kerberos协议认证的AS-REQ阶段&#xff0c;请求包cname对应的…

构建一个基于IIoT的智能工厂

构建一个基于工业物联网&#xff08;IIoT&#xff09;的智能工厂涉及到多个方面的技术和管理策略。以下是构建智能工厂的关键步骤和考虑因素&#xff1a; 需求分析与规划&#xff1a; 首先&#xff0c;需要对现有的生产流程进行深入分析&#xff0c;确定哪些环节可以通过IIoT技…

排序算法-堆排序

1.什么是堆 堆是一种特殊的数据结构&#xff0c;它是一种二叉树&#xff0c;其中每个节点都具有一个值并且满足以下两个条件&#xff1a; 堆是完全二叉树&#xff1a;除了最底层的叶节点外&#xff0c;其他层都是满的&#xff0c;并且最底层的叶节点都尽量靠左排列。堆中每个…

X服务器远程连接问题解决:Bad displayname ““‘或Missing X server or $DISPLAY

X服务器远程连接问题 报错1 ImportError: this platform is not supported: (failed to acquire X connection: Bad displayname "", DisplayNameError()) Try one of the following resolutions: * Please make surethat you have an X server running, and that …

SQL语句的编写

##创建用户-建表建库 #创建一个用户名为 feng&#xff0c;允许从任何主机 % 连接&#xff0c;并使用密码 sc123456 进行身份验证的用户。 rootTENNIS 16:33 scmysql>create user feng% identified by sc123456; Query OK, 0 rows affected (0.04 sec) #创建一个名为fen…

nuxt3使用记录一:框架摸索

之前直接用的Vue3&#xff0c;后面为了seo&#xff0c;了解到Vue3用SSR渲染很复杂&#xff0c;甚至衍生了出nuxt3这个框架&#xff0c;这个框架在github已经有50K star了&#xff0c;也已经是个非常成熟的框架了&#xff0c;不过我感觉国内的资料也不多&#xff0c;看来国内接受…

notepad++绿色版添加右键菜单

解压路径 D:\Green\notepad_v8.0_x64_绿色版 添加右键菜单.reg 新建nodepad添加右键菜单.reg文件 Windows Registry Editor Version 5.00[HKEY_CLASSES_ROOT\*\shell\NotePad] "Edit with &Notepad" "Icon""D:\\Green\\notepad_v8.0_x64_绿色版…

BUUCTF:BUU UPLOAD COURSE 1[WriteUP]

构造一句话PHP木马 <?php eval(system($_POST[shell])); ?> 利用eval函数解析$shell的值使得服务器执行system命令 eval函数是无法直接执行命令的&#xff0c;只能把字符串当作php代码解析 这里我们构造的木马是POST的方式上传&#xff0c;那就用MaxHacKBar来执行 …

【vite】-【vite介绍】-【vite的基础应用】-【vite的高级应用】-【

目录 vite介绍vite的基础应用vite创建项目vite创建vue3项目vite创建vue2项目vite创建react项目 vite中使用css的各种功能vite中使用tsvite中处理静态资源的方法vite集成eslint和prettiervite中的env环境变量 vite的高级应用 vite介绍 一、特点&#xff1a; 开发时效率极高开箱…

瘦身Spring Boot应用(thinJar)

瘦身Spring Boot应用(thinJar) 简介 我们使用Spring Boot提供的spring-boot-maven-plugin打包Spring Boot应用&#xff0c;可以直接获得一个完整的可运行的jar包&#xff0c;把它上传到服务器上再运行就极其方便。 但是这种方式也不是没有缺点。最大的缺点就是包太大了&…

Day:004(1) | Python爬虫:高效数据抓取的编程技术(数据解析)

数据解析-正则表达式 在前面我们已经搞定了怎样获取页面的内容&#xff0c;不过还差一步&#xff0c;这么多杂乱的代码夹杂文字我们怎样 把它提取出来整理呢&#xff1f;下面就开始介绍一个十分强大的工具&#xff0c;正则表达式&#xff01; 正则表达式是对字符串操作的一种…

前端node使用WebSocket实现实时通信例子

首先先下载ws库 npm install ws server.js [自定义websocket服务器,记得先用node启动] const WebSocket require(ws);const wss new WebSocket.Server({ port: 8888 });wss.on(connection, function connection(ws) {console.log(Client connected);ws.on(message, functi…

华为ensp中高级acl (控制列表) 原理和配置命令 (详解)

作者主页&#xff1a;点击&#xff01; ENSP专栏&#xff1a;点击&#xff01; 创作时间&#xff1a;2024年4月6日23点18分 高级acl&#xff08;Access Control List&#xff09;是一种访问控制列表&#xff0c;可以根据数据包的源IP地址、目标IP地址、源端口、目标端口、协议…

Golang | Leetcode Golang题解之第13题罗马数字转整数

题目&#xff1a; 题解&#xff1a; var symbolValues map[byte]int{I: 1, V: 5, X: 10, L: 50, C: 100, D: 500, M: 1000}func romanToInt(s string) (ans int) {n : len(s)for i : range s {value : symbolValues[s[i]]if i < n-1 && value < symbolValues[s…

识别语序成语的简单神经网络

成语是汉语中的一种特殊表达形式&#xff0c;而语序成语则更加特殊&#xff0c;需要通过特定的语序才能表达其含义。在这篇文章中&#xff0c;我们将使用简单的神经网络来识别具有特定语序的成语。 首先&#xff0c;我们定义了一个数据集&#xff0c;其中包含了一些语序成语和…

关于 VScode, 点击文件右键或者在文件夹中没有 【 在vscode中打开选项】 解决办法

关于 VScode, 点击文件右键或者在文件夹中没有 【 在vscode中打开选项】 解决办法 段子手-168 2024-4-6 1、在任意位置创建一个文本文件。如&#xff1a;a.txt 2、复制以下代码到 a.txt 文本文件中。 &#xff08;注&#xff1a; 以 ; 开头的 , 是备注信息 , 不需要做任何修…

基于单片机高压输电线路微机保护系统设计

**单片机设计介绍&#xff0c;基于单片机高压输电线路微机保护系统设计 文章目录 一 概要二、功能设计三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机高压输电线路微机保护系统设计是一个涉及电力系统继电保护的复杂工程。该系统主要利用单片机作为控制核心&…

在类Unix平台实现TCP服务端

在类Unix平台实现TCP客户端 创建服务器socket 在TCP服务器代码中&#xff0c;我们创建一个socket&#xff0c;然后调用bind函数&#xff0c;绑定到这个socket&#xff1a; // 创建本地地址配置信息struct addrinfo hints;// 清空hints的东西&#xff0c;为设置新的信息做准备…