vue2知识补充

1.页面传参及传参之后刷新页面数据丢失

query参数有多层对象时,刷新丢失可以使用JSON.stringify解决

params参数丢失:还没试过怎么解决

    methods: {// query和params区别// query类似 get,跳转之后页面 url后面会拼接参数,类似?id=1,非重要性的可以这样传,密码之类还是用params刷新页面id还在// params类似 post,跳转之后页面 url后面不会拼接参数 ,但是刷新页面id 会消失go(){const data  = {name:'query参数',id:'348783479283023'}// this.$router.push('/route')//直接使用path跳转// this.$router.push({path:'/route'})//使用path跳转// this.$router.push({name:'route',query:data})//使用那么跳转并携带参数this.$router.push({name:'route',query:{data:JSON.stringify(data),//多层的参数用JSON.stringify转一下可以防止刷新后丢失,接收的页面使用JSON.parse转义一下date:'2023-11-02'}})},goParams(){// params传参刷新页面参数会丢失,如果不是一些如密码之类的数据可以使用query,当然丢失问题也有解决办法const data  = {name:'params参数',id:'03490303039423'}// this.$router.push({name:'route',params:data})this.$router.push({name:'route',params:{data:data,date:'2023-11-02'}})}}

2.provide跟inject

二者是用来传递参数的,适用于父组件给后代组件传递参数

传参页面

export default {
provide:{//将现需要传递的参数以对象的形式写在provide里面grandfatherValue:'参数',fun:()=>{console.log('函数参数');}},
// 在使用 Provide 和 Inject 进行依赖注入时,需要注意以下几点:
// Provide 和 Inject 只能在父子组件之间使用。对于兄弟组件之间的数据共享,建议使用 Vuex 等状态管理工具。
// Provide 和 Inject 注入的数据是响应式的。如果提供的数据发生变化,那么所有注入了该数据的组件都会相应地更新。
// Provide 和 Inject 不保证注入顺序。如果多个组件都提供了同一个键名,注入的顺序不确定,可能会导致组件的渲染结果出现意外情况。
// Provide 和 Inject 不限制嵌套层数。在组件树中,Provide 和 Inject 可以一直循环注入,直到找到对应的数据或方法。},

接收参数页面

export default {name: "",inject:['grandfatherValue','fun'],//将需要使用的参数以数组的形式列出来,然后在其他地方就能通过this来使用了//inject:{value:'grandfatherValue'},//也可以是对象写法形式
}

3.vue作用域插槽的使用v-slot:name= "{data}"、slot-scope="{data}"

一般用于动态结构中如elementUI中的表格等等 

 父组件

<template><div class="page">life组件<GrandsonCom><!-- 插槽的写法有很多,以插槽名header为例有:#header、slot="header",v-slot:header,#语法仅适用于template --><!-- 作用域插槽写法一 --><!-- slot是插槽的写法one:是插槽的名字data:是插槽传过来的数据,加个{}包裹是解构的意思 --><template slot="one" slot-scope="{data}"><!-- 解构出来的值只在作用域内生效 -->{{'插槽一' + data}}</template><!-- 作用域插槽写法二 --><!-- v-slot是插槽的固定语法冒号后面的two是插槽的名字data:是插槽传过来的数据 --><template v-slot:two="{data}">{{'插槽二'+data}}</template><template v-slot:three="{data}">{{'插槽三'+data}}</template><template v-slot:four="{data}">{{'插槽四'+data}}</template></GrandsonCom></div>
</template>

 子组件

<template><div class="page"><div v-for="(item,index) in list" :key="index" class="box"><slot :name="item.slot" :data="item.name"></slot></div></div>
</template>
<script>
export default {name: "",data() {return {list:[{name:'路飞',id:'232434',slot:'one'},{name:'索隆',id:'458845',slot:'two'},{name:'娜美',id:'798989',slot:'three'},{name:'乌索普',id:'987789',slot:'four'},]};},
};
</script>

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

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

相关文章

http和https分别是什么?

HTTP&#xff08;Hypertext Transfer Protocol&#xff09;和HTTPS&#xff08;HTTP Secure&#xff09;是互联网上应用最为广泛的两类协议&#xff0c;都是用于在网络中进行数据交换。 1.HTTP&#xff1a; HTTP是一种无状态的协议&#xff0c;即服务器并不保持与客户端的连接…

Proteus仿真--1602LCD显示电话拨号键盘按键实验(仿真文件+程序)

本文主要介绍基于51单片机的LCD1602显示电话拨号键盘按键实验&#xff08;完整仿真源文件及代码见文末链接&#xff09; 仿真图如下 其中右下方12个按键模拟仿真手机键盘&#xff0c;使用方法同手机键一样&#xff0c;拨打手机号码则在液晶显示屏上显示对应的号码 仿真运行…

DDoS类型攻击对企业造成的危害

超级科技实验室的一项研究发现&#xff0c;每十家企业中&#xff0c;有四家(39%)企业没有做好准备应对DDoS攻击&#xff0c;保护自身安全。且不了解应对这类攻击最有效的保护手段是什么。 由于缺乏相关安全知识和保护&#xff0c;使得企业面临巨大的风险。 当黑客发动DDoS攻击…

译文:我们如何使 Elasticsearch 7.11 中的 date_histogram 聚合比以往更快

这篇文章是ES7.11版本的文章&#xff0c;主要学习的是思路&#xff0c;记录在这里留作以后参考用。 原文地址&#xff1a;https://www.elastic.co/cn/blog/how-we-made-date-histogram-aggregations-faster-than-ever-in-elasticsearch-7-11 正文开始&#xff1a; Elasticsea…

【数组】有序数组的平方

## 977.有序数组的平方 力扣题目链接 (opens new window) 给你一个按 非递减顺序 排序的整数数组 nums&#xff0c;返回 每个数字的平方 组成的新数组&#xff0c;要求也按 非递减顺序 排序。 示例 1&#xff1a; 输入&#xff1a;nums [-4,-1,0,3,10]输出&#xff1a;[0,…

初阶JavaEE(15)(Cookie 和 Session、理解会话机制 (Session)、实现用户登录网页、上传文件网页、常用的代码片段)

接上次博客&#xff1a;初阶JavaEE&#xff08;14&#xff09;表白墙程序-CSDN博客 Cookie 和 Session 你还记得我们之前提到的Cookie吗&#xff1f; Cookie是HTTP请求header中的一个属性&#xff0c;是一种用于在浏览器和服务器之间持久存储数据的机制&#xff0c;允许网站…

g.Grafana之Gauge的图形说明

直接上操作截图 1. 创建一个新的Dashboard 2.为Dashboard创建变量 【General】下的Name与Label的名称自定义 【Query options】 下的Group可以填写Zabbix内的所有组/.*/ , 然后通过Regex正则过滤需要的组名 3.设置Dashboard的图形 我使用文字来描述下这个图 1.我们在dash…

Azure 机器学习 - 使用 ONNX 对来自 AutoML 的计算机视觉模型进行预测

目录 一、环境准备二、下载 ONNX 模型文件2.1 Azure 机器学习工作室2.2 Azure 机器学习 Python SDK2.3 生成模型进行批量评分多类图像分类 三、加载标签和 ONNX 模型文件四、获取 ONNX 模型的预期输入和输出详细信息ONNX 模型的预期输入和输出格式多类图像分类 多类图像分类输入…

Intel oneAPI笔记(2)--jupyter官方文档(oneAPI_Intro)学习笔记

前言 本文是对jupyterlab中oneAPI_Essentials/01_oneAPI_Intro文档的学习记录&#xff0c;包含对SYCL、DPC extends SYCL、oneAPI Programming models等介绍和SYCL代码的初步演示等内容 oneAPI编程模型综述 oneAPI编程模型提供了一个全面而统一的开发人员工具组合&#xff0…

【ROS】Nav2源码之nav2_behavior_tree详解

【ROS】郭老二博文之:ROS目录 1、简介 nav2_bt_navigator实现ROS2节点以行为树的方式来处理。 nav2_behavior_tree模块提供如下功能: 一个c++模板类,可以轻松地将ROS2 动作(actions)和服务(services)集成到行为树(Behavior Trees)中。特定于导航的行为树节点。通用的Behav…

力扣382.链表随机节点(java利用数组随机返回节点值)

Problem: 382. 链表随机节点 文章目录 思路解题方法复杂度Code 思路 注意链表与数组的特性&#xff0c;对于随机访问读取的操作利用数组可以较方便实现&#xff0c;所以我们可以将链表中的节点值先存入到数组中最后再取出随机生成节点位置的值。 解题方法 1.生成List集合与Rand…

跨域(CORS)和JWT 详解

跨域 (CORS) 概念 同源策略 (Same-Origin Policy) 同源策略是一项浏览器安全特性&#xff0c;它限制了一个网页中的脚本如何与另一个来源&#xff08;域名、协议、端口&#xff09;的资源进行交互。这对于防止跨站点请求伪造和数据泄露非常重要。 为什么需要跨域? 跨域问题通…

论文阅读—— BiFormer(cvpr2023)

论文&#xff1a;https://arxiv.org/abs/2303.08810 github&#xff1a;GitHub - rayleizhu/BiFormer: [CVPR 2023] Official code release of our paper "BiFormer: Vision Transformer with Bi-Level Routing Attention" 一、介绍 1、要解决的问题&#xff1a;t…

Mybatis的工作原理

一、Mybatis的工作原理 1.构建 mybatis 配置文件 构建 mybatis 的config,xml,java的mapper&#xff0c;entity类 config文件 <?xml version"1.0" encoding"UTF-8" ?> <!DOCTYPE configurationPUBLIC "-//mybatis.org//DTD Config 3.0/…

0002Java安卓程序设计-基于Uniapp+springboot菜谱美食饮食健康管理App

文章目录 开发环境 《[含文档PPT源码等]精品基于Uniappspringboot饮食健康管理App》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功 编程技术交流、源码分享、模板分享、网课教程 &#x1f427;裙&#xff1a;776871563 功能介绍&#xff…

XPATH 注入漏洞

一、XPATH 1、XPATH 概述&#xff1a; XPath 是一种查询语言&#xff0c;它描述了如何在 XML 文档中查找特定元素&#xff08;包括属性、处理指令等&#xff09;。既然是一种查询语言&#xff0c;XPath 在一些方面与 SQL 相似&#xff0c;不过&#xff0c;XPath 的不同之处在于…

ES-初识ES

文章目录 介绍ElasticSearchElasticSearch的主要功能ElasticSearch的主要特性ElasticSearch的家族成员LogStashKibanaBeats ELK&#xff08;ElasticSearch LogStash Kibana&#xff09;的应用场景与数据库集成指标采集/日志分析 安装和配置ElasticSearch一、安装1、下载ES安装…

深度学习实战:基于TensorFlow与OpenCV的手语识别系统

文章目录 写在前面基于TensorFlow与OpenCV的手语识别系统安装环境一、导入工具库二、导入数据集三、数据预处理四、训练模型基于CNN基于LeNet5基于ResNet50 五、模型预测基于OpenCV 写在后面 写在前面 本期内容&#xff1a;基于TensorFlow与OpenCV的手语识别系统 实验环境&…

lv9 嵌入式开发 数据库sqlite

1 数据库基本概念 数据&#xff08;Data&#xff09; 能够输入计算机并能被计算机程序识别和处理的信息集合 数据库 &#xff08;Database&#xff09; 数据库是在数据库管理系统管理和控制之下&#xff0c;存放在存储介质上的数据集合 2 常用的数据库 大型数据库…

过了面试,后面的在线测评还会刷人吗?

过了面试&#xff0c;后面的在线测评还会刷人吗&#xff1f;完全有可能刷&#xff0c;如果不是为了刷&#xff0c;何必要给你做线上测评&#xff0c;我说的有道理不&#xff1f; 好吧&#xff0c;说到为什么在线测评要刷人&#xff0c;怎么刷&#xff1f; 怎么才能确保不被刷&…