vue3学习(五)--- 父子组件传值

文章目录

  • defineProps
    • 普通写法
    • TS写法
  • defineEmits
    • 普通写法
    • TS写法
  • defineExpose

definePropsdefineEmits 都是只能在 <script setup> 中使用的编译器宏。他们不需要导入,且会随着 <script setup> 的处理过程一同被编译掉。

defineProps

接收父组件传递的参数

父页面
<template><p>父组件</p><child :num="num"></child>
</template>
子页面
<template><p>我是子组件接收的num:{{ num }}</p>
</template><script lang="ts" setup>
let Props = defineProps({num: {type: Number,default: 0,},
})
console.log('Props',Props,Props.num)
</script>

想在子组件中使用参数值需要用变量Props 接收defineProps

使用的时候直接Props.num,在html中直接使用num即可无需加上变量名称。

defineProps两种写法:

普通写法

let Props = defineProps({num: {type: Number,default: 0,},
})

TS写法

defineProps<{title:string,data:number[]
}>()

TS 特有的默认值方式:withDefaults是个函数也是无须引入开箱即用接受一个props函数第二个参数是一个对象设置默认值。

withDefaults(defineProps<{title:string,data:number[]
}>(),{title:'张三',data()=>[1,2,3]
})

defineEmits

子组件向父组件派发数据

父页面<template><p>父组件</p><child :num="num" @fn="addNum" @fn2="paramsNum"></child>
</template><script lang="ts" setup>
========= vue2需要使用component挂载组件,vue3 不需要! 引入就直接可以使用!!!=========
import Child from './child.vue'
import { ref } from 'vue'let num = ref(20)========= 子传父回调 =========
let addNum = () => {num.value++
}========= 子传父带参数 =========
let paramsNum = (id: any) => {console.log('子传父带参数 id', id)
}
</script>
子页面<template><p>我是子组件接收的num:{{ num }}</p><button @click="add">add</button><button @click="parameter">add带参数</button>
</template><script lang="ts" setup>
let Props = defineProps({num: {type: Number,default: 0,},
})
console.log('Props',Props,Props.num)
// 子传父 需要先定义好emit方法 这点区别比较大 然后调用let emit = defineEmits<{(event: 'fn'): void(event: 'fn2', id: number): void
}>()let add = () => {emit('fn')
}
let parameter = () => {emit('fn2', Props.num)
}
</script>

defineEmits两种写法:

普通写法

const emit = defineEmits(['fn','fn2'])

TS写法

let emit = defineEmits<{(event: 'fn'): void(event: 'fn2', id: number): void
}>()
//不带参数
let add = () => {emit('fn')
}
//带参数
let parameter = () => {emit('fn2', Props.num)
}

defineExpose

使用 <script setup> 的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例,不会暴露任何在 <script setup> 中声明的绑定。
可以通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性。

通过defineExpose,我们从父组件获取子组件实例通过ref

父组件<MenuCom ref="refMenu"></MenuCom >
//这样获取是有代码提示的
<script setup lang="ts">
import MenuCom from '../xxxxxxx.vue'
//注意这儿的typeof里面放的是组件名字(MenuCom)不是ref的名字 ref的名字对应开头的变量名(refMenu)
const refMenu = ref<InstanceType<typeof MenuCom>>()//打印子组件属性
console.log(refMenu.value.list )
</script>

这时候父组件想要读到子组件的属性可以通过 defineExpose暴露

子组件
const list = reactive<number[]>([4, 5, 6])
defineExpose({list
})

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

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

相关文章

MySQL中使用函数会使索引失效?

文章目录 1、前置准备2、ChatGPT的答案3、实践证明SQL1SQL2SQL3SQL4SQL5 4、总结 1、前置准备 首先创建我们要测试的库表 CREATE TABLE lianhe_index (id int(11) NOT NULL AUTO_INCREMENT COMMENT id,name varchar(255) DEFAULT NULL,age int(11) DEFAULT NULL,number int(1…

Flink报错could not be loaded due to a linkage failure

文章目录 1、报错2、原因3、解决 1、报错 在Flink上提交作业&#xff0c;点Submit没反应&#xff0c;F12看到接口报错信息为&#xff1a; 大概意思是&#xff0c;由于链接失败&#xff0c;无法加载程序的入口点类xx。没啥鸟用的信息&#xff0c;去日志目录继续分析&#xff1a…

Django Channels、WS协议及同步与异步详解

CONTENTS 1. 同步与异步2. WebSocket3. 在JavaScript中使用WebSocket4. Django Channels 1. 同步与异步 在 Django 中&#xff0c;同步和异步主要涉及到请求处理的方式。这两种方式的主要区别在于它们如何处理多个并发请求&#xff1a; 同步&#xff08;Synchronous&#xff…

删除的通话记录也能找回!如何iPhone很早以前的通话记录

是否搜索过忘记保存的拨号号码?是的!我们都经历过,这可能真的很烦人,尤其是当你的iPhone决定隐藏你的通话记录时。但别担心,在这篇文章中,我将向你展示如何使用各种方法查看一个月前iPhone上的通话历史记录。因此,让我们来了解和发现如何在iPhone上查看你过去的通话记录…

什么是指标体系,怎么搭建一套完整的指标体系?(附PDF素材)

什么是指标体系&#xff0c;怎么搭建一套完整的指标体系&#xff1f;数字化转型过程中&#xff0c;这个问题一直困扰着数据分析师。主要体现在&#xff1a; 各部门根据业务需求&#xff0c;都有一部分量化指标&#xff0c;但不够全面&#xff0c;对企业整体数据分析应用能力提…

算法练习12——跳跃游戏

LeetCode 55 跳跃游戏 给你一个非负整数数组 nums &#xff0c;你最初位于数组的 第一个下标 。数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个下标&#xff0c;如果可以&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 贪…

Python日志模块dome

import os import logbook from logbook.more import ColorizedStderrHandler from functools import wrapscur_path os.path.dirname(os.path.dirname(__file__)) # 当前目录的上级目录 log_path os.path.join(cur_path, logs) # 文件夹拼接 if not os.path.exists(log_pa…

MySQL锁概述

数据库锁是一种机制&#xff0c;用于管理并发访问数据库的方式。当多个用户或事务同时访问数据库时&#xff0c;可能会导致数据不一致或冲突的问题。数据库锁的作用是确保数据的一致性和完整性&#xff0c;同时允许多个用户并发地访问数据库。 需要注意的是&#xff0c;加锁是消…

ajax同步与异步,json-serve的安装与使用,node.js的下载

20.ajax json 轻量级的数据格式做配置文件网络传输 xml 重量级的数据格式 可扩展标记语言做配置文件网络传输 现在目前主流就是大量采用json做网络传输数据格式 1.ajax的概念: 与服务器进行’通信’的一种技术,能够实现异步的刷新页面 **同步:**按照顺序一步步的执行,容易造…

VMware和Debian下载

文章目录 ⭐️写在前面的话⭐️一、VMware二、Debain三、建立虚拟机&#x1f680; 先看后赞&#xff0c;养成习惯&#xff01;&#x1f680;&#x1f680; 先看后赞&#xff0c;养成习惯&#xff01;&#x1f680; ⭐️写在前面的话⭐️ CSDN主页&#xff1a;程序员好冰 目前在…

多输入多输出 | MATLAB实现CNN-GRU-Attention卷积神经网络-门控循环单元结合SE注意力机制的多输入多输出预测

多输入多输出 | MATLAB实现CNN-GRU-Attention卷积神经网络-门控循环单元结合SE注意力机制的多输入多输出预测 目录 多输入多输出 | MATLAB实现CNN-GRU-Attention卷积神经网络-门控循环单元结合SE注意力机制的多输入多输出预测预测效果基本介绍程序设计往期精彩参考资料 预测效果…

使用PyTorch处理多维特征输入的完美指南

&#x1f497;&#x1f497;&#x1f497;欢迎来到我的博客&#xff0c;你将找到有关如何使用技术解决问题的文章&#xff0c;也会找到某个技术的学习路线。无论你是何种职业&#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章&#xff0c;也欢…

C++ 模板同时使用默认参数和偏特化

C 模板同时使用默认参数和偏特化 正常的偏特化都很简单&#xff0c;但是如果和默认参数碰到一起就会复杂一点点 先讲答案&#xff08;按照顺序&#xff09;&#xff1a; 如果显示指定了&#xff0c;首先看显示指定的如果没显示指定&#xff0c;就找是否有默认参数的版本如果都…

Element Plus阻止 el-dropdown、el-switch等冒泡事件

最近做vue3项目&#xff0c;使用Element Plus,又遇到坑了&#xff01; 问题点&#xff1a;组件中遇到事件冒泡问题了&#xff0c;el-checkbox 中 change事件要求阻止冒泡&#xff0c;如下代码中要求点击checkbox时不调用li标签的show方法 <li click"show()">…

STM32物联网基于ZigBee智能家居控制系统

实践制作DIY- GC0169-ZigBee智能家居 一、功能说明&#xff1a; 基于STM32单片机设计-ZigBee智能家居 二、功能介绍&#xff1a; 1个主机显示板&#xff1a;STM32F103C最小系统ZigBee无线模块OLED显示器 语音识别模块多个按键ESP8266-WIFI模块&#xff08;仅WIFI版本有&…

Spring Cloud Pipelines 入门实践

文章目录 1. 前言2. Spring Cloud Pipelines 是做什么的2.1. 预定义的流程2.2. 集成测试和契约测试2.3.部署策略 4. Spring Cloud Pipelines的使用示例4.1. 创建一个Spring Boot应用4.2. 将代码托管到GitHub仓库4.3. 添加Spring Cloud Pipelines依赖4.4. 配置Spring Cloud Pipe…

生成Android证书

前提&#xff1a;确保本机安装好了java1.8 第一步 打开CMD keytool -genkey -alias AAAA -keyalg RSA -keysize 2048 -validity 36500 -keystore D:\mygitee\keyStore\szxApp.jksD:\mygitee\keyStore\szxApp.jks是证书要生成的位置 szxApp.jks 是证书名称 D:\mygitee\keySto…

volatile为什么无法保证原子性

假设定义 volatile int i 0; 现在2个线程同时 i&#xff0c;为什么数据还可能会出错&#xff1f;一起来看下图&#xff0c;虽然volatile的机制是&#xff1a;如果volatile修饰的变量有修改&#xff0c;那么会将变更内容写回主内存&#xff0c;同时让其他线程工作内存的该变量缓…

Pytorvh之Vision Transformer图像分类

文章目录 前言一、Transformer1.Transformer概览2.Self-Attention3.Multi-head Attention4.Position-wise Feed-Forward Networks(位置前馈网络)5.残差连接和层归一化6.Positional Encodings(位置编码) 二、Vision Transformer1.Vision Transformer概览2.Embedding层结构&#…

C++中resize和reserve

1.reserve(n)对capacity操作 capacity < n : 扩容capacity > n : 不操作 2.resize(n, m)对size操作 size < n : size增加到n 增加的值为msize > n : size减小到ncapacity < n : 先增大容量至n 再增大size至n 增加的值为m