当前位置: 首页 > news >正文

vue入门实战(二)父子组件显示,参数传递

经过上次的写法,我们已经写出每个list项,现在要在每个父组件下面加入自己的子项
一、新建子组件:
smallItem.vue:

<script>
export default{props:['text','id','status']	//父组件传来的参数
}
</script>
<template>(...html代码...)<input class="item_child_input form-control" :value=text>//这里的text就是props传进来的text
</template>

二、在父组件里引入子组件:
item.vue:

<script>import smallItem from './smallItem.vue'	//引入子组件export default{components:{smallItem		//声明组件}}
</script>
<template><div class="children_div" v-if="IsOpen">	//循环调用<smallItem v-for="child in children" :key="child.id" :status=child.status :text=child.text :id=child.id></smallItem></div>
</template>

注意:
1.循环时在v-for后面要加:key,不然会报错
2.:id写在最后
3.样式调整:
由于vue采用flex布局,有时会出现元素错乱的情况,这里我在index.html里加入了一句样式

<style>#app{grid-template-columns: 1fr;}
</style>

呈现效果:
在这里插入图片描述
大家可以看一下dom的渲染:
在这里插入图片描述
三、加入事件
在子组件里,我们加入了一个点击事件:
smallItem.vue:

methods:{Check(event){this.checkStatus = this.checkStatus == 0 ? 1 : 0;}},

(这里本来是命名为status,但vs提示说status被弃用,我猜应该是status是vue关键字,于是换了一个名字checkStatus)
开始测试,触发Check事件发现,控制台报错说this里面的变量是不允许被set的:
TypeError: ‘set’ on proxy: trap returned falsish for property ‘checkStatus’
这里的checkStatus当然就是props里面的变量,是不允许被改变的;
于是在本组件里定义一个自己的变量:

data(){return{checkStatus:this.checkStatus}}

这时的this.checkStatus就变成了我们重新定义的这个变量,就可以赋值了
实现效果:
点击子组件的对号小图标,记录为已完成
这里发现了一个问题,this.checkStatus在下次的调用被改回来了,我想可能是data里的return没有return我赋的值,这里暂时还不知道怎么解决,明天再看

相关文章:

vue入门实战(二)父子组件显示,参数传递

经过上次的写法&#xff0c;我们已经写出每个list项&#xff0c;现在要在每个父组件下面加入自己的子项 一、新建子组件&#xff1a; smallItem.vue&#xff1a; <script> export default{props:[text,id,status] //父组件传来的参数 } </script> <template>…...

【Linux】Ubuntu:安装系统后配置

hostname&#xff1a;更改主机名 打开终端。 使用hostnamectl命令更改主机名。 sudo hostnamectl set-hostname 新的主机名你可以使用hostnamectl 命令来验证更改是否成功&#xff1a; hostnamectlChrome&#xff1a;更换默认浏览器 以下是从 Ubuntu 中移除预装的 Snap 版 Fi…...

springboot-查看版本和版本所需JDK

文章目录 访问spring管网查看springboot 项目查看当前版本查看版本所需JDK 访问spring管网 https://spring.io/ 查看springboot 项目 查看当前版本 点击调整到参考文档中去… 查看版本所需JDK...

fuxa搭建与使用(web组态)

1. 安装Node.js -> npm安装 参考网址&#xff1a;https://blog.csdn.net/WHF__/article/details/129362462 一、安装运行 C:WINDOWSsystem32>node -v v20.17.0 C:WINDOWSsystem32>npm -v 10.8.2 二、环境配置 在安装路径&#xff08;D:Program_Files odejs&#x…...

中间件--MongoDB部署及初始化js脚本(docker部署,docker-entrypoint-initdb.d,数据迁移,自动化部署)

一、概述 MongoDB是一种常见的Nosql数据库&#xff08;非关系型数据库&#xff09;&#xff0c;以文档&#xff08;Document&#xff09;的形式存储数据。是非关系型数据库中最像关系型数据库的一种。本篇主要介绍下部署和数据迁移。 在 MongoDB 官方镜像部署介绍中&#xff…...

C语言期末考试——常见考题(模拟考)

目录 一、填空题&#xff08;每空2分&#xff0c;共 20 分&#xff09; 二、选择题&#xff08;每题2分&#xff0c;共26分&#xff09; 三、编程题&#xff08;第1题6分&#xff0c;其余题目每题10分&#xff09; &#xff01;&#xff01;&#xff01;需要答案的可以私信&…...

流量过滤与路径转发控制

1&#xff0c;策略路由 PBR基本概念&#xff1a; 策略路由&#xff0c;使网络设备不仅能够基于报文的目的IP地址进行数据转发&#xff0c;也能基于其他元素进行转发&#xff0c;比如源IP地址、MAC地址 可以使用ACL匹配特定的报文&#xff0c;针对该ACL进行PBR部署 PRB策略的…...

Ungoogled Chromium127编译指南 Windows篇 - 获取源码(七)

1. 引言 在完成所有必要工具的安装和配置后&#xff0c;我们进入了Ungoogled Chromium编译过程的第一个关键阶段&#xff1a;获取源代码。本文将详细介绍如何正确获取和准备Ungoogled Chromium的源代码&#xff0c;为后续的编译工作打下基础。 2. 准备工作 2.1 环境检查 在…...

k8s 之 StatefulSet

深入理解StatefulSet&#xff08;一&#xff09;&#xff1a;拓扑状态 k8s有状态与无状态的区别 无状态服务&#xff1a;deployment Deployment被设计用来管理无状态服务的pod,每个pod完全一致.什么意思呢? 无状态服务内的多个Pod创建的顺序是没有顺序的. 无状态服务内的多…...

iPhone 17 Air基本确认,3个大动作

近段时间&#xff0c;果粉圈都在讨论一个尚未发布的新品&#xff1a;iPhone 17 Air&#xff0c;苹果又要来整新活了。 从供应链消息来看&#xff0c;iPhone 17 Air本质上是Plus的替代品&#xff0c;主要是在维持“大屏”这一卖点的同时&#xff0c;增加了“轻薄”属性&#xff…...

鸿蒙实现应用通知

目录&#xff1a; 1、应用通知的表现形式2、应用通知消息的实现1、发布普通文本类型通知2、发布进度类型通知3、更新通知4、移除通知 3、设置通知道通展示不同形式通知4、设置通知组5、为通知添加行为意图1、导入模块2、创建WantAgentInfo信息3、创建WantAgent对象4、构造Notif…...

ElasticSearch常见的索引_集群的备份与恢复方案

方案一&#xff1a;使用Elasticsearch的快照和恢复功能进行备份和恢复。该方案适用于集群整体备份与迁移&#xff0c;包括全量、增量备份和恢复。 方案二&#xff1a;通过reindex操作在集群内或跨集群同步数据。该方案适用于相同集群但不同索引层面的迁移&#xff0c;或者跨集…...

vue图片之放大、缩小、1:1、刷新、左切换、全屏、右切换、左旋咋、右旋转、x轴翻转、y轴翻转

先上效果&#xff0c;代码在下面 <template><!-- 图片列表 --><div class"image-list"><img:src"imageSrc"v-for"(imageSrc, index) in images":key"index"click"openImage(index)"error"handleI…...

Docker多架构镜像构建踩坑记

背景 公司为了做信创项目的亮点&#xff0c;需要将现有的一套在X86上运行的应用系统迁移到ARM服务器上运行&#xff0c;整个项目通过后端Java&#xff0c;前端VUEJS开发通过CICD做成Docker镜像在K8S里面运行。但是当前的CICD产品不支持ARM的镜像构建&#xff0c;于是只能手工构…...

“pinn是无网格的”???

“pinn是无网格的”&#xff1f;&#xff1f;&#xff1f; PINN&#xff0c;即物理信息神经网络&#xff08;Physics-Informed Neural Networks&#xff09;&#xff0c;是一种将物理定律作为先验知识整合到神经网络训练过程中的方法。它之所以被称为“无网格”的&#xff0c;…...

换一个ip地址是什么意思?换一个网络ip地址会变吗

在网络的世界里&#xff0c;IP地址如同每台设备的“身份证”&#xff0c;是确保网络信息能够准确传输到指定目标的关键。然而&#xff0c;在某些情况下&#xff0c;我们可能需要更换这个“身份证”&#xff0c;也就是更换IP地址。那么&#xff0c;换一个IP地址究竟是什么意思&a…...

JavaWeb学习--cookie和session,实现登录的记住我和验证码功能

目录 &#xff08;一&#xff09;Cookie概述 1.什么叫Cookie 2.Cookie规范 3.Cookie的覆盖 4.cookie的最大存活时间 ​​​​​​&#xff08;Cookie的生命&#xff09; &#xff08;二&#xff09; Cookie的API 1.创建Cookie&#xff1a;new 构造方法 2.保存到客户端浏…...

深度学习:基于MindSpore的极简风大模型微调

什么是PEFT&#xff1f;What is PEFT&#xff1f; PEFT(Parameter Efficient Fine-Tuning)是一系列让大规模预训练模型高效适应于新任务或新数据集的技术。 PEFT在保持大部分模型权重冻结&#xff0c;只修改或添加一小部份参数。这种方法极大得减少了计算量和存储开销&#x…...

【LeetCode力扣热题100】【LeetCode 1】两数之和

方法一&#xff1a;暴力循环 两层循环&#xff0c;遍历所有的组合&#xff0c;直到满足条件&#xff0c;返回结果。 class Solution { public:vector<int> twoSum(vector<int>& nums, int target) {for(int i0; i<nums.size()-1 ;i){for(int j i1; j<…...

定制链接类名,两类跳转传参,vue路由重定向,404,模式设置

router-link-exact-active 和 router -link-active两个类名都太长&#xff0c;可以在router路由对象中定制进行简化 // index.js// 路由的使用步骤 52 // 1.下载 v3.6.5 // 2.引入 // 3.安装注册Vue.use(Vue插件) // 4.创建路由对象 // 5.注入到new Vue中&#xff0c;建立关联…...

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...