Vue3父子组件传参

一,父子组件传参

应用场景:父子组件传参
Vue3碎片:defineEmits,defineProps,ref,reactive,onMounted

1.父组件传子组件

a.父组件传参子组件

import { ref} from 'vue'
import OnChild from './onChild.vue'
const toGive=ref("apple");
<OnChild :getGive="toGive" />

b.子组件获取

import { onMounted} from 'vue'
const getFruit=defineProps({getGive:String
})
onMounted(()=>{console.log("子组件获得",getFruit.getGive)
})

2.子组件传父组件

a,子组件

import { reactive} from 'vue'
const playList=reactive({ name:"路人甲"})
playList.type="乒乓球🏓!";
const emit= defineEmits(['toList']);
const pass=()=>{playList.status="发送了一个"emit('toList',playList)
}

b,父组件获取

import { reactive} from 'vue'
import OnChild from './onChild.vue'
const getList= reactive({});
<OnChild  @toList="getListArr"/>
const getListArr=(value)=>{// getList.value=valuegetList.value = { ...Object.assign({}, value)}console.log("接收一个",getList.value);
}

c,父组件更新子组件传送信息

const  updateInfo=(()=>{toGive.value="orange";console.log("传给子组件一个",toGive.value);
})

3.效果图

在这里插入图片描述

简单使用,总结至此,欢迎各位工友交流学习。
传送门:
1.Vue3中provide,inject使用
2.Vue3中使用自定义指令
3.Vue3中动态组件使用
在这里插入图片描述

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

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

相关文章

【力扣】快乐数,哈希集合+快慢指针+数学

快乐数原题地址 方法一&#xff1a;哈希集合 定义函数getNext(n)&#xff0c;返回n的所有位的平方和。一直执行ngetNext(n)&#xff0c;最终只有2种可能&#xff1a; n停留在1。无限循环且不为1。 证明&#xff1a;情况1是存在的&#xff0c;如力扣的示例一&#xff1a; 接…

Linux free命令教程:轻松愉快的掌握内存管理(附案例详解和注意事项)

Linux free命令介绍 free命令用于获取系统中可用的总随机存取内存量&#xff0c;已使用的内存量和系统中可用的交换内存量。free命令或实用程序还显示内核使用的缓冲内存⁵。 Linux free命令适用的Linux版本 free命令在所有主流的Linux发行版中都是可用的&#xff0c;包括但…

微信自动预约小程序开发指南:从小白到专家

随着互联网的发展&#xff0c;小程序已经成为了一个备受欢迎的在线预约平台。本文将详细介绍如何使用第三方制作平台&#xff0c;如乔拓云网&#xff0c;来搭建一个从入门到精通的预约小程序。 首先&#xff0c;我们需要登录乔拓云网&#xff0c;并选择一个适合自己的小程序模板…

汽车控制臂的拓扑优化

前言 本示例使用优化模块通过减小控制臂的体积同时最大化其刚度来优化汽车控制臂的设计。 本页讨论 前言应用描述Abaqus建模方法和仿真技术文件参考 应用描述 本例说明了汽车控制臂的拓扑优化&#xff0c;在拓扑优化过程中&#xff0c;修改设计区域中单元的材料特性(有效地从…

双非本科准备秋招(20.1)—— 并发编程之生产者消费者

生产者消费者 与保护性暂停中的不同&#xff0c;不需要产生结果和消费结果的线程一一对应。 生产者仅负责产生结果数据&#xff0c;不关心数据该如何处理&#xff0c;而消费者专心处理结果数据 JDK 中各种阻塞队列&#xff0c;采用的就是这种模式 代码实现&#xff1a; 首先…

【开源】基于JAVA+Vue+SpringBoot的新能源电池回收系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 用户档案模块2.2 电池品类模块2.3 回收机构模块2.4 电池订单模块2.5 客服咨询模块 三、系统设计3.1 用例设计3.2 业务流程设计3.3 E-R 图设计 四、系统展示五、核心代码5.1 增改电池类型5.2 查询电池品类5.3 查询电池回…

MySQL之密码策略和用户授权

华子目录 密码策略查看数据库当前的密码策略密码策略详解caching_sha2_password_auto_generate_rsa_keyscaching_sha2_password_digest_roundscaching_sha2_password_private_key_pathcaching_sha2_password_public_key_pathdefault_password_lifetimedisconnect_on_expired_pa…

Java学习笔记2024/2/7

练习四&#xff1a;复制数组 需求&#xff1a; 把一个数组中的元素复制到另一个新数组中去。 package com.angus.comprehensiveExercise; ​ public class test4 {public static void main(String[] args) {//需求&#xff1a;// 把一个数组中的元素复制到另一个新数组中去…

Excel——合并计算

1.表格的合并计算&#xff08;单张表格/多个表格&#xff09; Q&#xff1a;请统计两个表格中各商品的总销量和总销售额&#xff0c;将结果放置在下方任意位置。 A&#xff1a;选择一个需要将合并计算数据放置区域的空白单元格 选择【数据】——【合并计算】&#xff0c;【函…

秘塔科技推出AI搜索产品「秘塔AI搜索」

近日&#xff0c;国内一家人工智能科技公司&#xff08;秘塔科技&#xff09;推出了一款AI搜索产品——秘塔AI搜索&#xff0c;能够大幅提升搜索效率&#xff0c;解决日常生活、工作学习等场景中遇到的各类搜索需求。 秘塔AI搜索官网&#xff1a;https://metaso.cn/ 相较于传统…

前端文件下载的多种方式

前端文件下载的多种方式。 前言a标签下载a标签常用属性介绍- target&#xff0c;href&#xff0c;download。 window.location.href下载window.open下载iframe 下载动态生成a标签下载文件url下载文件流下载blob文件流转换常用类型 使用 streamSaver 看实时下载进度 前言 如果我…

B站UP主实时信息获取展示php源码

B站UP主实时数据展示系统 - PHP源码分享 想要实时追踪你心仪的B站UP主的最新动态吗&#xff1f;现在&#xff0c;你可以轻松获取并展示B站UP主的实时数据&#xff0c;包括粉丝数、作品数、头像、播放量等关键信息。 功能亮点&#xff1a; 实时更新&#xff1a;系统通过B站AP…

OpenCV识别视频中物体运动并截取保存

功能很简单&#xff1a;输入原始视频&#xff0c;输出视频中有画面变化的部分 适合理解基本框架&#xff0c;可以在这个基础上增加各种酷炫时髦的功能 [doge] ※注释非常保姆级※ import cv2 import numpy as np import os from datetime import datetime# 检测两帧之间变化…

航芯ACM32G103开发板评测 08 ADC Timer外设测试

航芯ACM32G103开发板评测 08 ADC Timer外设测试 1. 软硬件平台 ACM32G103 Board开发板MDK-ARM Keil 2. 定时器Timer 在一般的MCU芯片中&#xff0c;定时器这个外设资源是非常重要的&#xff0c;一般可以分为SysTick定时器&#xff08;系统滴答定时器&#xff09;、常规定时…

【洛谷 P1143】进制转换 题解(数学+除基取余法)

进制转换 题目描述 请你编一程序实现两种不同进制之间的数据转换。 输入格式 共三行&#xff0c;第一行是一个正整数&#xff0c;表示需要转换的数的进制 n ( 2 ≤ n ≤ 16 ) n\ (2\le n\le 16) n (2≤n≤16)&#xff0c;第二行是一个 n n n 进制数&#xff0c;若 n >…

【Django-ninja】在django ninja中处理异常

1. 直接抛内置异常 Django ninja内置了一些常用异常类。 from ninja.errors import HttpErrorapi.get("/some/resource") def some_operation(request):if True:raise HttpError(503, "Service Unavailable. Please retry later.")2. 覆写异常类 可以覆…

代码随想录算法训练营29期Day43|LeetCode 1049,494,474

文档讲解&#xff1a;最后一块石头的重量II 目标和 一和零 1049.最后一块石头的重量II 题目链接&#xff1a;https://leetcode.cn/problems/last-stone-weight-ii/description/ 思路&#xff1a; 本题其实就是尽量让石头分成重量相同的两堆&#xff0c;相撞之后剩下的石头最…

CTF秀 ctfshow WEB入门 web1-10 wp精讲

目录 web1_查看源码 web3_抓包 web4-9_目录文件 web10_cookie web1_查看源码 ctrlu 查看源码 web3_抓包 查看源码&#xff0c;无果 抓包&#xff0c;找到flag web4-9_目录文件 GitHub - maurosoria/dirsearch: Web path scanner 下载dirsearch工具扫一下就都出来了 web4-…

以“防方视角”观JS文件信息泄露

为方便您的阅读&#xff0c;可点击下方蓝色字体&#xff0c;进行跳转↓↓↓ 01 案例概述02 攻击路径03 防方思路 01 案例概述 这篇文章来自微信公众号“黑白之道”&#xff0c;记录的某师傅从js文件泄露接口信息&#xff0c;未授权获取大量敏感信息以及通过逻辑漏洞登录管理员账…

邦芒解析:跳槽到管理职位须分析的四点

如果跳槽到一般的管理职位&#xff0c;需要应聘者至少进行四方面的分析&#xff1a; ​一、自己实际的背景。包括应聘者所从事的行业、专业是什么&#xff1f;实际工作年限是多少、积攒了什么样的经验、已取得的业绩等&#xff1b; ​二、自己真实的能力。除了有好的业绩…