Vue3-组合式API下的父传子和子传父

组合式API下的父传子

基本思想:

1.父组件中给子组件绑定组件

2.子组件内部通过props选项接收

const props=defineProps({属性名:类型})

由于script上写了setup,所以无法直接配置props选项,所以需要借助于“编译器宏”函数接收传递的数据

js中访问传递的数据:props.变量名

模板中:{{变量名}}

如果传递的是一个变量,那么父组件中引入的子组件传递的数据要写成:

<SonCom :message="message"></SonCom>

defineProps原理:就是编译阶段的一个标识,实际编译器解析时,遇到后会进行编译转换

组合式API下的子传父

基本思想:

1.父组件中给子组件标签通过@绑定事件

2.子组件内部通过emit方法触发事件

const emit=defineEmits(['事件名'])
emit('事件名',参数)

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

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

相关文章

基于element-plus定义表单配置化

文章目录 前言一、配置化的前提二、配置的相关组件1、新建form.vue组件2、新建input.vue组件3、新建select.vue组件4、新建v-html.vue组件5、新建upload.vue组件6、新建switch.vue组件7、新建radio.vue组件8、新建checkbox.vue组件9、新建date.vue组件10、新建time-picker.vue组…

arcgis 批量删除Table中的某些Field

当shp或者table文件较少时&#xff0c;可以手动删除每个文件中的某些字段&#xff0c;当文件较多时&#xff0c;就需要使用arcpy或者model进行处理。

Elasticsearch 和 Go 中使用向量搜索寻找地鼠

作者&#xff1a;CARLY RICHMOND&#xff0c;LAURENT SAINT-FLIX 就像动物和编程语言一样&#xff0c;搜索也经历了不同实践的演变&#xff0c;很难在其中做出选择。 加入我们的第二部分&#xff0c;通过 Elasticsearch 中的矢量搜索在 Go 中狩猎地鼠&#xff08;gophers&…

防火防盗防小人 使用 Jasypt 库来加密配置文件

⚔️ 项目配置信息存放在哪&#xff1f; 在日常开发工作中&#xff0c;我们经常需要使用到各种敏感配置&#xff0c;如数据库密码、各厂商的 SecretId、SecretKey 等敏感信息。 通常情况下&#xff0c;我们会将这些敏感信息明文放到配置文件中&#xff0c;或者放到配置中心中。…

Python爬虫实战-批量爬取美女图片网下载图片

大家好&#xff0c;我是python222小锋老师。 近日锋哥又卷了一波Python实战课程-批量爬取美女图片网下载图片&#xff0c;主要是巩固下Python爬虫基础 视频版教程&#xff1a; Python爬虫实战-批量爬取美女图片网下载图片 视频教程_哔哩哔哩_bilibiliPython爬虫实战-批量爬取…

计算机网络第4章-通用转发和SDN

引子&#xff1a; 在前面&#xff0c;我们将基于目的地转发的特征总结为两个步骤&#xff1a; 查找目的IP地址&#xff08;匹配&#xff09;&#xff0c;然后将分组发送到有特定输出端口的交换结构&#xff08;“动作”&#xff09;。 但是这种转发特征会带来许多问题&#…

【JavaEE初阶】 TCP协议详细解析

文章目录 &#x1f332;TCP协议的概念&#x1f6a9;TCP协议段格式&#x1f6a9;TCP的特性 &#x1f333;TCP原理&#x1f6a9;确认应答机制&#xff08;安全机制&#xff09;&#x1f6a9;超时重传机制&#xff08;安全机制&#xff09;&#x1f6a9;三次握手四次挥手&#xff…

YOLOv4: Optimal Speed and Accuracy of Object Detection(2020.4)

文章目录 AbstractIntroductionRelated workObject detection modelsBag of freebiesBag of specials MethodologySelection of architectureSelection of BoF and BoSAdditional improvementsYOLOv4 ExperimentsResults表8列出了使用Maxwell GPU的帧率对比结果表9列出了使用Pa…

Android 图层列表 、 LayerDrawable 、 layer-list \ 改变 seekbar thumb 滑块 的颜色

android 官网 &#xff1a; 图层列表 LayerDrawable / layer-list LayerDrawable 是管理其他可绘制对象数组的可绘制对象。列表中的每个可绘制对象均按照列表顺序绘制。列表中的最后一个可绘制对象绘于顶部。 每个可绘制对象均由单个 <layer-list> 元素内的 <item>…

财税服务展示预约小程序的作用是什么

财税财政往往困扰着很多公司&#xff0c;尤其是公司里没有相应职员或工作压力大的情况下&#xff0c;不少商家就会寻找代理记账、审计服务、会计代理等服务的机构。 对财政服务代理机构&#xff08;会计公司&#xff09;来说&#xff0c;市场企业多而广&#xff0c;理论上来说…

酷柚易汛ERP-客户管理操作指南

1、应用场景 对客户信息进行管理&#xff0c;可新增客户、设置客户等级、联系人信息、银行账户和销售人员等信息&#xff0c;方便开单时自动匹配销售信息。 2、主要操作 2.1 新增客户 打开【资料】-【客户管理】&#xff0c;点击【新增】。 在页面输入客户信息、联系人地址…

105.am40刷机(linux)折腾记1-前期的准备工作1

前段时间在某鱼上逛的时候&#xff0c;发现一款3399的盒子只要150大洋&#xff0c;内心就开始澎拜&#xff0c;一激动就下手了3台&#xff0c;花了450大洋&#xff08;现在想想&#xff0c;心都碎了一地&#xff09;。 然后自己又来来回回折腾了几天&#xff0c;目前能跑上fire…