Vue3之setup参数介绍

news2024/11/13 15:05:58
setup(props, context) {
	...
}

一、参数

使用setup函数时,它将接受两个参数:

  • props
  • context

让我们更深入地研究如何使用每个参数

二、Props

setup函数中的第一个参数是props。正如在一个标准组件中所期望的那样,setup函数中的props是响应式的,当传入新的prop时,它将被更新。

export default {
	props: {
		title: String
	},
	setup(props, context) {
		console.log(props.title)
		...
	}
}

Warning:因为props是响应式的,你不能使用ES6解构,因为它会消除prop的响应式。

如果需要解构prop,可以通过使用setup函数中的toRefs来安全地完成此操作

import { toRefs } from 'vue

export default {
	props: {
		title: String
	},
	setup(props, context) {
		const { title } = toRefs(props)
		console.log(title.value)
		...
	}
}

三、context

context参数是一个普通的javascript对象,它对组件暴露三个属性:attrs、slots、emit。

export default {
	setup(props, context) {
		// Attribute(非响应式对象)
		console.log(context.attrs)
		
		// 插槽(非响应式对象)
		console.log(context.slots)
		
		// 触发事件(方法)
		console.log(context.emit)
	}
}

context是一个普通的JavaScript对象,也就是说,它不是响应式的,这意味着你可以安全地对context使用ES6解构。

export default {
	setup(props, { attrs, slots, emmit }) {
		...
	}
}

attrs和slots是有状态的对象,它们总是会随组件本身的更新而更新。这意味着你应该避免对它们进行解构,并始终以attrs.x或slots.x的方式引用property。

请注意,与props不同,attrs和slots是非响应式的。如果你打算根据attrs或slots更改应用副作用,那么应该在onUpdated生命周期钩子中执行此操作。

访问组件的property

执行setup时,组件实例尚未被创建。因此,你只能访问以下property:

  • props
  • attrs
  • slots
  • emit

换句话说,你将无法访问以下组件选项:

  • data
  • computed
  • methods

在setup()内部,this不会是该活跃实例的引用因为setup()是在解析其他组件选项之前被调用的,所以setup()内部的this的行为与其他选项中的this完全不同。这在和其他选项式 API一起使用setup()时可能会导致混淆。

1、attrs

用途:当父组件传递数据给子组件时,子组件不通过props接收,那么父组件传递的数据就到了setup中的context的attrs属性。

<div id="app">
<!-- 父组件传递数据给子组件 -->
<son webName="自如初"></son>
</div>

<script>
const app = Vue.createApp({
});

// 子组件不使用props接收
app.component('son', {
 template:`<div>son</div>`,

 setup(props, context) {
  const { attrs, slots, emit} = context;
  // 打印父组件传递的数据
  console.log(attrs.webname);
  return {};
 }
});
const vm = app.mount('#app');
</script>

2、slots

用于接收渲染父组件传递的插槽内容

<div id="app">
<son>
 父组件通插槽传递的内容
</son>
</div>

<script>
const app = Vue.createApp({
});

app.component('son', {
 template:`<div>son</div>`,

 setup(props, context) {
  const { h } = Vue;
  const { attrs, slots, emit} = context;
 
  // 显示父组件传递的内容
  return () => h('p', {}, slots.default());
 }
});
const vm = app.mount('#app');
</script>

3、emit

向父组件触发事件。

<div id="app">
<!-- 4、父组件监听子组件发射的事件 -->
<son @sclick="getData"></son>
</div>

<script>
const app = Vue.createApp({
 methods: {
  // 5、实现事件
  getData () {
   alert(1)
  }
 }
});

app.component('son', {
 // 1、子组件中绑定事件
 template:`<div @click="sonClick">son</div>`,

 setup(props, context) {
  const { attrs, slots, emit} = context;
 
  function sonClick() {
   // 2、通过 emit 向父组件发射事件
   emit('sclick');
  }

   // 3、对外暴露该事件
  return { sonClick };
 }
});
const vm = app.mount('#app');
</script>

4、使用渲染函数

setup还可以返回一个渲染函数,该函数可以直接使用在同一作用域中声明的响应式状态:
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

Elasticsearch:Explicit mapping - 显式映射

显式映射相比较动态映射&#xff08;Dynamic mapping&#xff09;是需要我们在索引创建时就定义字段及其类型。这个和我们传统的 RDMS 数据库一样&#xff0c;在我们写入数据到数据库之前&#xff0c;我们需要工整地定义好每个字段及其类型和长度。Elasticsearch 既可以使用显式…

【C++】二叉搜索树(概念、实现、应用)

前言&#xff1a; 此前我们在C语言实现数据结构的时候学习过二叉树&#xff0c;但是那个时候我们没有深入学习二叉搜索树。本章重提二叉树并详解二叉搜索树有下面两个原因&#xff1a; 1、为我们下一章学习set和map做准备&#xff1b;2、详解我们进阶一点的二叉树的面试OJ题&a…

【C++学习】日积月累——二叉搜索树详解

一、二叉搜索树 1.1 二叉搜索树概念 二叉搜索树又称二叉排序树&#xff0c;它或者是一棵树&#xff0c;或者是具有以下性质的二叉树&#xff1a; 若它的左子树不为空&#xff0c;则左子树上所有节点的值都小于根节点的值&#xff1b;若它的右子树不为空&#xff0c;则右子树上…

程序员常用的代码比较工具,你更喜欢哪款?

目录 &#x1f4a1; Linux 命令行的对比工具 一. diff 二. vimdiff命令 &#x1f4a1; GUI 比对工具 三. WinMerge 四. Diffuse 五. Code Compare 六. Beyond Compare 七. UltraCompare 八. Altova DiffDog 九. Kompare 十. Meld 十一. XXdiff 十二. KDiff3 十…

拓扑排序模板及例题

概念 一个有向无环图必然存在一个拓扑序列与之对应。 流程&#xff1a; 先将所有入度为0的节点入队将队列中的节点出队&#xff0c;出队序列就是对应拓扑序。对于弹出的节点x&#xff0c;遍历x所有出度y&#xff0c;对y进行入读减一操作检查入度减一之后的节点y&#xff0c;…

慈航公益·高莞乡情行

2023年4月9日&#xff0c;慈航公益高莞乡情行---高村陈屋第二届“敬老睦宗情暖乡土”活动日暨“英华教育奖学基金”成立大会在高村陈屋如期举行。 高村陈屋位于河源市连平县境内&#xff0c;为了赶上10点开始的活动&#xff0c;清晨六点半&#xff0c;志愿者们便从慈航出发&am…

12电感的应用

目录 一、电源电路使用 1、设计实例 二、高频电路中使用 1、选择Q值高的电感器 2、选择自谐振频率高的电感器 3、选择电感偏差小的电感器 三、控制振荡频率 四、确保高频信号的隔离 五、共模轭流线圈 一、电源电路使用 如式&#xff08;5&#xff09;所示&#xff0c;…

数码照片管理系统Damselfly

什么是 Damselfly &#xff1f; Damselfly 是一个基于服务器的数码照片管理系统。Damselfly 旨在管理基于文件夹的大型照片集合&#xff0c;特别关注快速搜索和关键字标记工作流程。Damselfly 包含强大的机器学习功能&#xff0c;可帮助您识别照片及其主体&#xff0c;包括人脸…

使用Socks5代理保障Windows网络安全

摘要&#xff1a;Socks5代理是一种在Windows系统中保障网络安全的有效方法。本文将详细介绍什么是Socks5代理&#xff0c;以及如何在Windows系统中使用Socks5代理来加强网络安全。同时&#xff0c;我们还将探讨如何编写代码来使用Socks5代理来保障应用程序的网络安全。 正文&am…

报表VS分析:为什么报表做不完?老板到底想要什么?

各位数据的朋友&#xff0c;大家好&#xff0c;我是老周道数据&#xff0c;和你一起&#xff0c;用常人思维数据分析&#xff0c;通过数据讲故事。 上一讲和大家讲了分析模型中的战斗机——财务分析模型。通过奥威BI软件的行计算模型来开发财务分析报表异常地简单&#xff0c;…

安装Django

1. 在物理环境安装Django Python官方的PyPi仓库为我们提供了一个统一的代码托管仓库&#xff0c;所有的第三方库&#xff0c;甚至你自己写的开源模块&#xff0c;都可以发布到这里&#xff0c;让全世界的人分享下载 pip是最有名的Python包管理工具 。提供了对Python包的查找、…

Linux 动态库的制作与使用

目录 动态库的制作和使用 动态库的制作和使用 原始结构如下&#xff1a; 先进入calc文件&#xff0c;并生成与位置无关的.o文件 接着生成动态文件库&#xff0c;使用ll指令可以看到&#xff0c;库名为绿色&#xff0c;linux中绿色的文件一般都是可执行文件 将其生成的lib…

如何快速搭建一个SpringBoot项目

前面我们了解了SpringBoot背景和特点&#xff0c;本节我们主要介绍如何快速构建一个SpringBoot项目&#xff0c;以此来提升日常开发效率。 SpringBoot是搭建应用的手脚架&#xff0c;由Spring公司的核心团队在2013年开始研发、2014年4月发布第一个版本的全新开源的轻量级框架。…

如何平衡倾斜摄影的三维模型轻量化数据文件大小和质量效果?

如何平衡倾斜摄影的三维模型轻量化数据文件大小和质量效果&#xff1f; 倾斜摄影超大场景的三维模型数据文件大小的具体范围取决于多种因素&#xff0c;如原始数据的复杂度、轻量化处理的方式和压缩算法等。一般而言&#xff0c;经过轻量化处理后&#xff0c;数据文件大小可以减…

centos7安装nginx及uwsgi部署django项目

1、安装配置uwsgi pip install uwsgi 2、在项目根目录下创建image_ocr_uwsgi.ini配置文件 [uwsgi] # 对外提供http服务的端口 http :9000 # 用于和nginx进行数据交互的端口 socket 127.0.0.1:8001 # django程序的主目录 chdir /home/image_process/image_ocr/image_ocr #…

【计算机架构】响应时间和吞吐量 | 相对性能 | 计算 CPU 时间 | 指令技术与 CPI | T=CC/CR, CC=IC*CPI

目录 0x00 响应时间和吞吐量&#xff08;Response Time and Throughput&#xff09; 0x01 相对性能&#xff08;Relative Performance&#xff09; 0x02 执行时间测量&#xff08;Measuring Execution Time&#xff09; 0x03 CPU 时钟&#xff08;Clocking&#xff09; 0x…

【RabbitMQ】| 狮子带你(超详细)原生Java操作兔子队列

目录 一. &#x1f981; 前言二. &#x1f981; 原生Java操作RabbitMQⅠ. 简单模式1. 添加依赖2. 编写生产者3. 编写消费者 Ⅱ. 工作队列模式1. 编写生产者2. 编写消费者3. 实现 Ⅲ. 发布订阅模式1. 编写生产者2. 编写消费者 Ⅳ. 路由模式1. 编写生产者2. 编写消费者 Ⅴ. 通配符…

SpringCloud源码之Spring Cloud Common核心接口说明

spring cloud commons spring cloud提供的通用抽象包&#xff0c;组件的实现基本上都依赖于当前包的接口定义实现功能&#xff0c;下面就是梳理一下当前包中都提供了哪些比较重要的接口 1. 服务注册 1.1 DiscoveryClient DiscoveryClient 是一个顶级的接口类&#xff0c;用…

node项目的建立

文章目录 1.node项目的建立1.1项目初始化1.2 安装express1.3 初始化服务器 2.配置跨域2.1安装cors2.2cors的引入&#xff08;app.js中&#xff09; 3.初始化路由3.1新建文件3.2初始路由模块3.3app.js注册3.4 在postman测试 4.抽离路由处理模块3.1 在router_handler新建user.js3…

为什么LC谐振频率附近信号会被放大

这个是LC低通滤波电路&#xff0c; 它的增益曲线是这样的 很多同学不理解为什么谐振频率附近信号会被放大&#xff0c;今天就来聊一聊为什么谐振频率附近信号会被放大。 看到这个LC低通滤波电路&#xff0c;假设输入信号源内阻为Rs&#xff0c;L和C为理想电感和电容&#xff0…