Vue-插槽

文章目录

  • 跨域
  • 什么是插槽
    • 默认插槽
    • 具名插槽
    • 作用域插槽
      • 什么是作用域插槽


跨域

什么是跨域?
跨域是指在浏览器中,一个网站的脚本或文档试图访问另一个网站的资源时,由于同源策略的限制,如果这三个方面之一存在差异:协议、域名(包括主域名和子域名)或端口,则会被视为不同的域,从而触发跨域限制

处理跨域的方式,
新增一台反向代理服务器,目前常用为生产常用Nginx

什么是插槽

让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于 父组件 ===>子组件
其中分类:默认插槽、具名插槽、作用域插槽

默认插槽

父组件中:
<Category><div>html结构1</div>
</Category>
子组件中:
<template><div><!-- 定义插槽<slot>插槽默认内容...</slot></div>
</template>

具名插槽

父组件中:
<Category><template slot="center"><div>html结构1</div></template><template v-slot:footer><div>html结构2</div></template>
</Category>
子组件中:
<template><div><!--定义插槽--J<slot name="center">插槽默认内容...</slot><slot name="footer">插槽默认内容...</slot></div>
</template>

作用域插槽

什么是作用域插槽

数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。(games数据在Category组件中,但使用数据所遍历出来的结构由App组件决定)。注意数据在子组件,但dom元素的结构在父组件中

父组件中:
<Category><template scope="scopeData"><!--生成的是u1列表--><ul><li v-for="g in scopeData.games" :key="g">{{g}}</li></ul></template>
</Category><Category><template slot-scope="scopeData"><!--生成的是h4标题 --><h4 v-for='g in scopeData.games" :key="g">{{g}}</h4></template>
</Category>子组件中:
<template><div><slot :games="games"></slot></div>
</template>
<script>
export default{name:'Category',props:['title'],//数据在子组件自身data(){return{games:['红色警戒",穿越火线',劲舞团',超级玛丽’]}},}
</script>

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

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

相关文章

基于ssm的志愿者招募系统的设计与实现(程序+文档+数据库)

** &#x1f345;点赞收藏关注 → 私信领取本源代码、数据库&#x1f345; 本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目&#xff0c;希望你能有所收获&#xff0c;少走一些弯路。&#x1f345;关注我不迷路&#x1f345;** 一、研究背景…

nginx有几种启动方式

Nginx 通常可以以两种主要的方式启动&#xff1a;作为前台进程运行或作为守护进程&#xff08;后台&#xff09;运行。 前台运行&#xff1a; 当Nginx以前台模式运行时&#xff0c;它会在命令行保持活动状态&#xff0c;所有的日志输出都会直接显示在命令行上。这种模式通常用于…

【Mysql优化】

目录 前言 1.在Mysql中&#xff0c;如何定位慢查询&#xff1f; 2.那这条SQL语句执行的很慢&#xff0c;如何分析&#xff08;优化&#xff09;呢&#xff1f; 3.了解过索引吗&#xff1f;&#xff08;什么是索引&#xff1f;&#xff09; 4.索引的底层结构了解过吗&#…

Redis底层数据结构之List

文章目录 1. Redis 6的list源码分析1. Redis 7的list源码分析 1. Redis 6的list源码分析 首先我们查看一下redis 6关于list的相关配置&#xff1a; config get list*可以看见redis 6的quicklist底层使用的数据结构是ziplist list-compress-depth&#xff1a;表示一个quicklis…

【力扣hot100】刷题笔记Day25

前言 这几天搞工作处理数据真是类似我也&#xff0c;还被老板打电话push压力有点大的&#xff0c;还好搞的差不多了&#xff0c;明天再汇报&#xff0c;赶紧偷闲再刷几道题&#xff08;可恶&#xff0c;被打破连更记录了&#xff09;这几天刷的是动态规划&#xff0c;由于很成…

elementui el-select组件多选设置初始值无法修改问题

elementui el-select组件多选设置初始值无法修改问题 对list直接赋值后点击修改select框&#xff0c;此时数据已改变但显示无变化。 <el-select v-model"form.optrList" multiple placeholder"请选择"><el-optionv-for"item in list":k…

APK漏洞扫描工具

一、APKDeepLens是一个基于python的工具&#xff0c;旨在扫描Android应用程序&#xff0c;专门针对OWASP TOP 10移动漏洞。 工具&#xff1a;python3.8或者以上版本 安装 git clone https://github.com/d78ui98/APKDeepLens/tree/main cd /APKDeepLens python3 -m venv venv…

Node携手MongoDB探险旅行⛏️

Node携手MongoDB探险旅行⛏️ 本篇文章&#xff0c;学习记录于&#xff1a;尚硅谷&#x1f3a2; 文章简单学习总结&#xff1a;如有错误 大佬 &#x1f449;点. 本篇不适合纯新手&#xff0c;因为本人已经使用很多数据库&#xff0c;很多数据库概念…就不会进行解释&#xff…

presto / trino plugin(自定义UDF函数)开发指南

方案1:自定义udf插件开发 1. Presto插件机制 presto不能像hive那样配置自定义的udf,而是采用插件机制实现。Presto 的插件(Plugin)机制,是 Presto 能够整合多种数据源的核心。通过实现不同的 Plugin,Presto 允许用户在不同类型的数据源之间进行 JOIN 等计算。Presto 内部的…

10、设计模式之外观模式(Facade)

一、什么是外观模式 这个大家一定是经常使用的&#xff0c;外观模式&#xff08;门面模式&#xff09;是一种结构型设计模式。它提供一个统一的接口&#xff0c;用于访问子系统中的一组接口&#xff0c;隐藏了系统的复杂性。最简单的应用就是&#xff0c;当controller层的逻辑处…

每天一个数据分析题(二百零五)

在分类模型评估中&#xff0c;哪些描述准确地涉及到ROC曲线和混淆矩阵的概念&#xff1f; A. ROC曲线是根据模型预测的概率值而非预测的类别来绘制的。 B. ROC曲线下面积&#xff08;AUC&#xff09;的值越大&#xff0c;表示模型的区分能力越强。 C. 混淆矩阵中的真正&…

十大Linux发行版各自的特色

Linux有许多不同的发行版&#xff0c;每个发行版都有自己的特色和用途。以下是一些主流Linux发行版及其特色&#xff1a; Ubuntu 用户友好&#xff0c;适合Linux新手。 基于Debian&#xff0c;拥有庞大的软件库。 长期支持&#xff08;LTS&#xff09;版本提供长达5年的支持…

C#实现二分查找算法

C#实现二分查找算法 以下是一个使用 C# 实现的二分查找算法示例&#xff1a; using System;class Program {static int BinarySearch(int[] arr, int target){int low 0;int high arr.Length - 1;while (low < high){int mid (low high) / 2;// 如果目标值等于中间元素…

使用 Array.prototype.with 更新不可变数组

庆祝&#xff1a;此功能现已在所有三个主要浏览器引擎中可用&#xff01; 浏览器最近获得了一种新的可互操作方法&#xff0c;您可以在数组上调用它&#xff1a;Array.prototype.with() 。 Browser Support 浏览器支持&#xff1a; chrome 110Edge 110firefox 115Safari 16 …

doris安装(docker方式)

背景 doris有两个进程 fe,处理用户请求,查询,元数据管理,节点管理be,数据存储,查询计划执行 架构图如下: 参考:https://doris.apache.org/zh-CN/docs/get-starting/what-is-apache-doris 1、定义docker-compose文件 version: 3 services:docker-fe:image: "apac…

MySQL数据库自动备份(Linux操作系统)

方式一 参考&#xff1a;https://blog.csdn.net/qq_48157004/article/details/126683610?spm1001.2014.3001.5506 1.MySQL备份脚本 在/home/backups/下建立.sh文件&#xff0c;文件名称 mysql_backup.sh ,内容如下 #!/bin/bash #备份路径 BACKUP/home/backups/mysqlBackup…

Python实战:元组一次性数据的处理利器

Python元组是一种不可变的序列类型&#xff0c;非常适合用于存储不应该被修改的数据。本文将深入探讨Python元组在处理一次性数据方面的优势和应用场景&#xff0c;包括元组的定义、操作、函数和方法&#xff0c;以及如何利用元组提高代码的可读性和性能。 1. Python元组简介 …

快手,得物,蓝月亮,蓝禾,奇安信,三七互娱,顺丰,康冠科技,金证科技24春招内推

快手&#xff0c;得物&#xff0c;蓝月亮&#xff0c;蓝禾&#xff0c;奇安信&#xff0c;三七互娱&#xff0c;顺丰&#xff0c;康冠科技&#xff0c;金证科技24春招内推 ①得物 【岗位】技术&#xff0c;设计&#xff0c;供应链&#xff0c;风控&#xff0c;产品&#xff0c;…

参考线平滑 - FemPosDeviation算法

FemPosDeviation参考线平滑方法是离散点平滑方法 参考文章&#xff1a; &#xff08;1&#xff09;参考线平滑-FemPosDeviation-OSQP &#xff08;2&#xff09;Planning基础库——散点曲线平滑 &#xff08;3&#xff09;参考线平滑-FemPosDeviation-SQP &#xff08;4&#x…

ICCV 2023 | NeRF-Det

NeRF-Det: Learning Geometry-Aware Volumetric Representation for Multi-View 3D Object Detection 介绍 本文介绍了一种新颖的方法&#xff0c;用于仅使用RGB图像作为输入进行室内3D目标检测。作者提出了利用神经辐射场&#xff08;NeRF&#xff09;来显式估计3D几何形状&…