Vue3中父子组件的传值问题

父子组件传值

在Vue3中如果想对子组件进行传值操作,则需要首先在const中定义多个响应式参数,必须记住的是,定义了响应式参数之后一定要在setup中return该参数,否则上面的template中不会识别,然后在template中定义

<subTableAModule :area="areaA":carNum="carNum"
/>

其中area是传参的第一个参数的名字,areaA是下面的响应式变量,使用前面的冒号可以将其动态绑定在script中的areaA上。这样就实现了script和template之间的交互,切记切记。相当于
v-bind:area="areaA"
即areaA这个字符串在这里会直接绑定script中的areaA响应式对象

setup() {const areaA = ref('A');const areaB = ref('B');const carNum = ref(1)--------省略线---------return {areaA,areaB,carNum,}
}

在子组件中,进行如下操作进行接收:

export default {props:{area:{type: String,required: true},carNum:{type: Number,required: true},},// name: 'stockList', components: { TestModule, BugModule, AgeModule, },setup() {

很有意思的是,props是不需要放在setup中的,实际上变量的形式和放不放在setup中其实关系不大。
在子组件的template中,就可以这样写(别忘了双引号),能够被正常识别

<el-table-column :label="area" align="center">

{{ }}模板插值语法和v-bind之间的区别

{{x}}只能在标签之间,其会被Vue渲染为x变量的当前值,而当x的值发生变化时,模板中的对应部分也会发生更新。不能用在标签内部!!
例如:

<p>{{x}}</p>
// 在上文的情况下,是可以进行渲染的
<el-table-column label={{x}} align="center">
// 而在标签中的时候,是无法被识别且被渲染为变量x的

:即v-bind则只能用于标签内部:lable="x"会使x变量动态绑定label,注意双引号别忘了。
例如:

<el-table-column :label="x" align="center">
//在标签中上文是可以识别的

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

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

相关文章

如何實現Apache HTTPS正向代理?

Apache是一款開源的、可高度定制的HTTP伺服器軟體&#xff0c;它位於客戶端和目標伺服器之間&#xff0c;用於從目標伺服器獲取資訊並將其返回給客戶端。它能提供各種功能&#xff0c;包括安全性、隱私性和數據壓縮。其中代理模組能夠支持正向代理和反向代理兩種模式。 而正向…

vue3+Ts+Ant Design Vue +天地图组件封装

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来Vue3TsAntDesign-Vue组件天地图组件的封装 示例图 首先,在index.html引入天地图资源,vue3选择v4版本 <script src"http://api.tianditu.gov.cn/api?…

【蓝桥杯每日一题】4.8 公约数

题目来源&#xff1a; 4199. 公约数 - AcWing题库 问题描述&#xff1a; ​ 找到最大整数x&#xff0c;需满足下面两个条件 x x x是 a a a, b b b的公约数 l < x < r l<x<r l<x<r 思路&#xff1a; 找到 a a a, b b b两个数的最大公约数 g c g c d (…

Python模块导入机制详解

大家好&#xff01;今天我们要一起踏上一段Python编程的奇妙旅程&#xff0c;探索那个神秘的“import”命令&#xff0c;就像在海盗宝藏地图上寻找隐藏的金币。你准备好跟着我深入学习Python模块的进口大法了吗&#xff1f; 首先&#xff0c;你知道吗&#xff1f;在Python中&a…

【c++leetcode】1. Two Sum

问题入口 遍历一遍哈希表: O(n) class Solution { public:vector<int> twoSum(vector<int>& nums, int target) {unordered_map<int, int> numMap;for (int i 0; i < nums.size(); i){int complement target - nums[i];if(numMap.count(complemen…

【Redis】NoSQL之Redis的配置和优化

关系型数据库与非关系型数据库 关系型数据库 关系型数据库是一个结构化的数据库&#xff0c;创建在关系型模型&#xff08;二维表&#xff09;的基础上&#xff1b;一般面向于记录&#xff1b; SQL语句(标准数据查询语句)就是一种基于关系型数据库的语言&#xff0c;用于执行…

在linux服务器上使用tcmalloc监控java应用内存

在centOS系统中 1.安装sudo yum install gperftools-libs 2.查看安装位置rpm -ql gperftools-libs 3.使用shell脚本启动 export HEAPPROFILE./heap.log &#xff08;tcmalloc监控的日志&#xff09; export HEAP_PROFILE_ALLOCATION_INTERVAL104857600 export LD_PRELOAD/…

安装 windows 版 dash —— zeal

1、下载安装 下载地址&#xff1a;Download Zeal 选择 Protable 版 直接使用 zeal 下载文档比较慢甚至失败&#xff0c;可以设置代理&#xff0c;也可以使用下面两种方式。 2、手动下载 docset 文档后导入 这种方法不能够选择文档的版本 &#xff08;1&#xff09;在 http://…

达梦数据库的V$DM_INI和V$PARAMETER系统视图

V$DM_INI和V$PARAMETER是达梦数据库中两个常用的系统视图&#xff0c;用于查看数据库的配置参数。这两个视图的主要区别在于它们展示参数的来源和用途。 V$DM_INI V$DM_INI视图主要用于展示数据库启动时加载的初始化参数信息。这些信息通常来自于数据库的初始化参数文件&…

自动驾驶中的传感器融合算法:卡尔曼滤波器和扩展卡尔曼滤波器

自动驾驶中的传感器融合算法&#xff1a;卡尔曼滤波器和扩展卡尔曼滤波器 附赠自动驾驶学习资料和量产经验&#xff1a;链接 介绍&#xff1a; 追踪静止和移动的目标是自动驾驶技术领域最为需要的核心技术之一。来源于多种传感器的信号&#xff0c;包括摄像头&#xff0c;雷达…

VSCode输入花括号{}}会多一个解决方案

打开设置 搜索Closing Brackets 选择BeforeWhitespace 选完后重启下VSCode即可

详解Vue3中如何使用动态组件

在 Vue 3 中,动态组件是一种允许在运行时动态切换组件的机制,本文主要为大家详细介绍了动态组件在Vue3中的具体使用。 Vue 3 提供了 元素以及 is 特性来实现动态组件的切换。 一、使用元素 在模板中使用 元素&#xff0c;通过 is 特性来动态切换组件&#xff1a; <templat…

ddres( ) 组站星双差方程和设计矩阵

1 ddres( )参数介绍 rtklib中进行的单频解算 双差观测值&#xff0c;单差的模糊度 单频点双差 DD (double-differenced) phase/code residuals ------------------------------ x 模糊度 P 方差-协方差阵 sat 共识卫星列表 ns 共识卫星数量 y…

深入了解WebKit:结构简介

随着互联网的发展&#xff0c;网页浏览器已经成为我们日常生活中不可或缺的工具之一。而在众多浏览器中&#xff0c;WebKit引擎作为其中之一的重要角色&#xff0c;驱动着一系列流行的浏览器&#xff0c;例如Safari和一些移动端浏览器。那么&#xff0c;WebKit究竟是如何构建的…

Linux中MySQL测试环境搭建主主集群

MySQL测试环境搭建主主集群 主机参数调调整 vi /etc/sysconfig/selinux #查看是否SELINUXdisabled #禁用firewalld service firewalld stop架构IPhostname主1数据库192.168.206.3zhou主2数据库192.168.206.4bin 主1数据库安装 # 进入目录 cd /opt# 下载安装包 wget https:/…

模型优化和调整(2)

接模型优化和调整&#xff08;1&#xff09; 调整反向传播 梯度消失和梯度爆炸 梯度消失和梯度爆炸都和计算出来的“delta”有关。理想的delta应该是逐渐减小的。如果delta一直太小&#xff0c;则会导致下降太慢&#xff0c;甚至对于权重没有改变&#xff0c;此时形成了梯度…

pe格式从入门到图形化显示(四)-节表

文章目录 前言一、什么是Windows PE格式节表&#xff1f;二、解析节表并显示1.节表数据结构以及字段描述2.节表的属性3.解析4.显示 前言 通过分析和解析Windows PE格式&#xff0c;并使用qt进行图形化显示 一、什么是Windows PE格式节表&#xff1f; PE格式的节表&#xff08…

深入C语言内存:数据在内存中的存储

一、数据类型 1. unsigned&#xff1a;无符号数类型 当一个数是无符号类型时&#xff0c;那么其最高位的1或0&#xff0c;和其它位一样&#xff0c;用来表示该数的大小。 2.signed&#xff1a;有符号数类型 当一个数是有符号类型时&#xff0c;最高数称为“符号位”。符号位为1…

绝地求生:第29赛季第1轮更新公告

正式服维护日期 ※ 下列时间可能会视维护情况而变化。 北京时间4月9日上午8:00 – 下午4:30 地图轮换 ※ 地图轮换将于北京时间每周三上午10点进行。 日期 正式服 – 普通比赛 可自主选择地图的地区 - 亚洲、东南亚 可自主选择地图的地区 – 韩国/日本、KAKAO 随机选择地…

3.10 Python数据类型转换

Python类型转换&#xff0c;Python数据类型转换函数大全 虽然 Python 是弱类型编程语言&#xff0c;不需要像Java或 C 语言那样还要在使用变量前声明变量的类型&#xff0c;但在一些特定场景中&#xff0c;仍然需要用到类型转换。 比如说&#xff0c;我们想通过使用 print() …