vue前端开发自学,插槽练习第二次,name属性的使用

vue前端开发自学,插槽练习第二次,name属性的使用!可以使用name属性,来自定义一个名字,这样,就可以在一个组件内同时出现多个插槽的内容了。在子组件内接收的时候,很简答,只需要在slot标签里面加上name=“mz”;

下面看代码。

<template><h3>App</h3><!-- <SlotBase><div><h3>标题</h3><p>内容</p></div></SlotBase> --><SlotTwo><template v-slot:header><h3>我是动态数据,{{message}}</h3></template><template v-slot:main><h4>我是静态内容来自插槽002</h4></template></SlotTwo></template>
<script>
import SlotBase from './components/SlotBase.vue'
import SlotTwo from "./components/SlotTwo.vue"
export default{data(){return {message:"插槽内容002"}},components:{SlotBase,SlotTwo}
}
</script>

这个内容是app.vue入口文件的内容源码。下面看看,SlotTwo.vue里面的代码情况。

<template><h3>插槽内容练习2</h3><slot name="header">插槽默认值1</slot><hr><slot name="main">插槽默认值2</slot>
</template>

如图所示,里面定义了2个插槽,而且都分别对应各自的name。这个name就是你在父组件里面定义那个属性值:

如图所示,这个v-slot就是用来自定义插槽的名字的。很简单。

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

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

相关文章

业务向——基于多多进宝平台的CPS

业务向——基于多多进宝平台的CPS 导读小试牛刀商品活动推广商品详情获取频道推广订单获取及和用户绑定小结 导读 多多进宝是拼多多的开放平台&#xff0c;为广大商家和推广者提供了一个机会&#xff0c;通过推广拼多多的商品来实现收益。多多进宝的CPS&#xff08;按效果付费…

[JAVA数据结构] 认识 Iterable、Collection、List 的常见方法签名以及含义

目录 (一)Iterable 1. 介绍 2. 常见方法 (二)Collection 1. 介绍 2. 常见方法 (三) List 1. 介绍 2. 常见方法 总结 (一) Iterable 1. 介绍 Iterable接口是Java中的一个接口&#xff0c;它是集合框架中的根接口之一。Iterable接口表示实现了迭代功能&#xff0c;即可以通过迭…

鸿蒙HarmonyOS兼容JS的类Web开发

鸿蒙HarmonyOS兼容JS的类Web开发 文章目录 鸿蒙HarmonyOS兼容JS的类Web开发文件组织目录结构文件访问规则媒体文件格式 js标签配置pageswindow示例 app.js应用生命周期应用对象6 HML语法参考页面结构数据绑定普通事件绑定冒泡事件绑定5捕获事件绑定5列表渲染条件渲染逻辑控制块…

HTML5 画布绘制海报

需求&#xff1a; 1、根据用户填写的联系人信息&#xff1a;姓名、手机号及微信二维码&#xff0c;生成海报&#xff0c;并下载保存到本地&#xff1b; 2、可多个海报切换供用户选择 实现&#xff1a;使用html5实现&#xff0c;为方便用户&#xff0c;做的手机网站的样式&am…

图形化编程:下一代的创新教育工具

在科技日新月异的今天&#xff0c;编程已经成为了一项必备的技能。然而&#xff0c;传统的编程语言对于许多人来说仍然是一项挑战&#xff0c;尤其是对于年轻的学习者。为了解决这个问题&#xff0c;图形化编程应运而生&#xff0c;它以其直观、易理解和易操作的特点&#xff0…

【MySQL】本地创建MySQL数据库详解

文章目录 下载MySQL安装重置密码本地连接 下载MySQL 下载网址&#xff1a;https://dev.mysql.com/downloads/mysql/ 安装 将下载好的压缩包解压到D盘。 在解压好的文件夹中创建my.ini文件。 将以下代码复制粘贴到创建好的my.ini文件中。注意修改文件路径。 [mysqld] #设置…

PHP留言板实现

完整教程PHP留言板 登陆界面 一个初学者的留言板&#xff08;登录和注册&#xff09;_php留言板登录注册-CSDN博客 留言板功能介绍 百度网盘 请输入提取码 进入百度网盘后&#xff0c;输入提取码&#xff1a;knxt&#xff0c;即可下载项目素材和游客访问页面的模板文件。 &…

讯飞医疗“单飞”上市,科大讯飞的“AI算盘”还灵吗?

近年来&#xff0c;人工智能的各种应用呈现出爆炸式的增长态势&#xff0c;“AI”模式在众多领域中不断展现出其多元化的潜力。就在最近&#xff0c;国内的人工智能技术领军企业也迈出了重要的一步。一直被誉为国内“AI之光”的科大讯飞在1月9日晚间发布了一份公告&#xff0c;…

jmeter--常用插件及服务器监控(14)

一.jmeter插件管理器 下载jmeter插件管理器&#xff1a;plugins-manager.jar 下载plugins-manager.jar并将其放入lib/ext目录&#xff0c;然后重启JMeter。 插件管理界面 打开选项->Plugins Manager&#xff08;界面见下图&#xff09;&#xff0c;“Installed Plugns”…

Windows pip install -r requirement.txt 太慢

解决方案一&#xff1a; 1、在虚拟环境中切换下载的源&#xff1a; pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple 2、当出现有pip.txt文件写入时&#xff0c;再执行pip安装 pip install -r requirement.txt 解决方案二&#xff1a; 1、在…

使用Openssl生成Https免费证书以及Nginx配置

1 证书和私钥的生成 1.创建服务器证书密钥文件 server.key&#xff1a; openssl genrsa -des3 -out server.key 2048 输入密码&#xff0c;确认密码&#xff0c;自己随便定义&#xff0c;但是要记住&#xff0c;后面会用到。 2.创建服务器证书的申请文件 server.csr openssl r…

jmeter接口自动化测试如何部署jenkins

首先&#xff0c;保证本地安装并部署了jenkins&#xff0c;jmeter&#xff0c;xslproc 我搭建的自动化测试框架是jmeterjenkinsxslproc ---注意&#xff1a;原理是&#xff0c;jmeter自生成的报告jtl文件&#xff0c;通过xslproc工具&#xff0c;再结合jmeter自带的模板修改&…

React Native 环境安装

Notion – The all-in-one workspace for your notes, tasks, wikis, and databases. 搭建开发环境 React Native 中文网 Homebrew&#xff08;包管理器&#xff09; → rvm&#xff08;ruby版本管理&#xff09; → ruby → cocoapods 安装 Homebrew Homebrew /bin/ba…

网安入门14-文件包含(file:// )

​ 什么是文件包含漏洞——来自ChatGPT4 文件包含漏洞是指应用程序在加载文件时&#xff0c;允许用户控制被加载文件的名称&#xff0c;从而导致恶意代码的执行或敏感信息的泄露。文件包含漏洞主要分为两种&#xff1a; 本地文件包含漏洞&#xff08;LFI&#xff09; &#…

jmeter和meterSphere如何使用第三方jar包

工具引用jar包语言都是beanshell 问题起因&#xff1a;metersphere 接口自动化实现过程中&#xff0c;如何实现字符串加密且加密方法依赖第三方库&#xff1b; 使用语言&#xff1a;beanshell脚本语言&#xff0c;java语言 使用工具&#xff1a;idea jmeter metersphere 1.首…

基于K-Means聚类算法与随机森林模型评估信贷风险客户【500010101】

项目背景 本数据集来自一家德国银行&#xff0c;由加州大学霍夫曼教授于 2016 年收集整理&#xff0c;每条记录代表了一个接受银行信贷的客户&#xff0c;这也就说明了&#xff0c;这些客户都是通过了贷款申请的&#xff0c;通过可视化分析对数据进行初步探索&#xff0c;并利…

蓝桥杯基础知识3 memset()

蓝桥杯基础知识3 memset() #include <bits/stdc.h> using namespace std;int main(){int a[5]; //随机数for(int i 0;i < 5; i)cout << a[i] << \n;cout << \n;memset(a, 0, sizeof a); //0for(int i 0;i < 5; i)cout << a[i] << …

【Java 干货教程】Java实现分页的几种方式详解

一、前言 无论是自我学习中&#xff0c;还是在工作中&#xff0c;固然会遇到与前端搭配实现分页的功能&#xff0c;发现有几种方式&#xff0c;特此记录一下。 二、实现方式 2.1、分页功能直接交给前端实现 这种情况也是有的&#xff0c;(根据业务场景且仅仅只能用于数据量…

多模态大模型Clip

一、经典分类模型的问题: 类别固定当前的模型只能胜任一个任务&#xff0c;迁移到新任务上非常困难类别互斥当前的CV数据集标注劳动密集&#xff0c;成本较高&#xff0c;当前模型泛化能力较差 负样本的组成(Batchsize有N个文本-图像对) Batchsize太小&#xff0c;负样本太少…

Echarts的常用API,以及常用的写法

ECharts是一款基于JavaScript的开源可视化库&#xff0c;用于构建交互式的图表和可视化数据。它提供了丰富的API用于定制图表和处理数据。下面是一些常用的ECharts API和写法的简介&#xff1a; 初始化图表容器&#xff1a; var myChart echarts.init(document.getElementBy…