Vue3的Props与Emit一目了然,直观使用

news/2024/7/10 1:31:54 标签: 前端, javascript, vue

props

父页面

father

<script>
improt son from './son'
const count = ref<number><0>;
function addCount() {
	count.value = count.value++
}
</script>
<template>
<son :count="count" :addCount="addCount"/>
<div>
<div>
</template>

子页面

son
<script lang='ts' setup>
const props = defineProps<{
	count:number;
	addCount:()=>viod
}>

</script>
<template>
<div>
{{ count }}
<button @click="addCount">增加</button>
<div>
</template>

emit

父页面

father

<script>
improt son from './son'
const count = ref<number><0>;
function addCount() {
	count.value = count.value++
}
</script>
<template>
<son  :addCount="addCount"/>
<div>
<div>
</template>

子页面

son
<script lang='ts' setup>
const props = defineProps<{
	count:number;
}>
// 定义
const emit = defineEmits<{
	(event:"addCount"):void;
}>

</script>
<template>
<div>
{{ count }}
// 引用
<button @click="emit("addCount")">增加</button>
<div>
</template>

有问题欢迎大家指教,谢谢~


http://www.niftyadmin.cn/n/5001297.html

相关文章

Redis从基础到进阶篇(三)----架构原理与集群演变

目录 一、缓存淘汰策略 1.1 LRU原理 1.2 案例分析 1.3 Redis缓存淘汰策略 1.3.1 设置最⼤缓存 1.3.2 淘汰策略 二、Redis事务 2.1 Redis事务典型应⽤—Redis乐观锁 2.2 Redis事务介绍 2.3 事务命令 2.3.1 MULTI 2.3.2 EXEC 2.3.3 DISCARD 2.3.4 WATCH 2.3.5 UNW…

OpenHarmony 使用 ArkUI Inspector 分析布局

● 摘要&#xff1a;视图的嵌套层次会影响应用的性能&#xff0c;开发者应该移除多余的嵌套层次&#xff0c;缩短组件刷新耗时。本文会介绍如何使用 ArkUI Inspector 工具分析布局&#xff0c;提示应用响应性能。 ● 关键字&#xff1a;列举本文相关的关键字&#xff1a;OpenH…

MuLogin防关联浏览器助你轻松实现TikTok多账号管理

在当今社交媒体的时代&#xff0c;TikTok作为全球最受欢迎的短视频平台之一&#xff0c;吸引了数以亿计的用户。许多人都拥有一个TikTok账号&#xff0c;但为什么有些人会选择拥有多个TikTok账号呢&#xff1f; 首先&#xff0c;多个TikTok账号可以用于不同的目的和身份。许多人…

2023高教社杯国赛数学建模C题思路+模型+代码(9.7晚开赛后第一时间更新)

目录 1.C题思路模型&#xff1a;9.7晚上比赛开始后&#xff0c;第一时间更新&#xff0c;获取见文末名片 2.竞赛注意事项&#xff1a;包括比赛流程&#xff0c;任务分配&#xff0c;时间把控&#xff0c;论文润色&#xff0c;已经发布在文末名片中 3.常用国赛数学建模算法 …

功率放大器主要要求有哪些

功率放大器是电子设备中常用的组件&#xff0c;用于将输入信号的功率放大到更高的水平。为了确保功率放大器的正常工作和性能表现&#xff0c;它需要满足一系列要求。下面西安安泰将详细介绍功率放大器的主要要求&#xff0c;希望大家可以对功率放大器有清晰的认识。 一、功率放…

软路由ip的优势与劣势:了解其适用场景和限制

在网络技术的快速发展中&#xff0c;软路由IP作为一种灵活且功能强大的网络设备&#xff0c;越来越受到人们的关注。然而&#xff0c;正如任何技术一样&#xff0c;软路由IP也有其优势和劣势。本文将深入探讨软路由IP的优势、劣势以及其适用场景和限制&#xff0c;帮助你更好地…

EMERSON 1X00781H01L电源模块

应用领域&#xff1a; EMERSON 1X00781H01L 电源模块广泛用于工业自动化、电力系统、通信设备、机器人技术和其他领域&#xff0c;以确保设备和系统的正常运行。 电源输出&#xff1a; 该电源模块通常提供不同的电压和电流输出选项&#xff0c;以满足不同设备和系统的电源需求…

ZED相机获取图像python

import pyzed.sl as sl import cv2 import numpy as np import osclass CameraZed2:def __init__(self,resolutionNone,fps30,depthMode None):self.zed sl.Camera()self.input_type sl.InputType()self.init_params sl.InitParameters(input_tself.input_type)# 设置分辨率…