slot-插槽的基本使用

简介: slot-插槽的基本使用

slot-插槽的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
    <!-- <i> 标签显示斜体文本效果。 -->
    <div id="app">
        <scpn></scpn>
        <scpn><button>按钮</button></scpn>
        <scpn>
            <i>呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵</i>
            <br>
            <button>按钮1</button>
            <button>按钮2</button>
        </scpn>
        <scpn>
            <button>按钮1</button>
            <button>按钮2</button>
            <button>按钮3</button>
        </scpn>
        <scpn></scpn>
    </div>

    <template id="lcpn">
        <div>
            <h1>哈哈哈</h1>
            <span>我来了</span>
            <br>
            <slot><h2>hhh</h2></slot>
            <!-- <slot></slot> -->
        </div>
    </template>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: "sb"
            },
            components: {
                scpn: {
                    template: '#lcpn',
                }
            }
        })
    </script>
</body>
</html>
目录
相关文章
|
8天前
|
云安全 监控 安全
|
13天前
|
机器学习/深度学习 人工智能 自然语言处理
Z-Image:冲击体验上限的下一代图像生成模型
通义实验室推出全新文生图模型Z-Image,以6B参数实现“快、稳、轻、准”突破。Turbo版本仅需8步亚秒级生成,支持16GB显存设备,中英双语理解与文字渲染尤为出色,真实感和美学表现媲美国际顶尖模型,被誉为“最值得关注的开源生图模型之一”。
1438 8
|
7天前
|
人工智能 安全 前端开发
AgentScope Java v1.0 发布,让 Java 开发者轻松构建企业级 Agentic 应用
AgentScope 重磅发布 Java 版本,拥抱企业开发主流技术栈。
475 11
|
19天前
|
人工智能 Java API
Java 正式进入 Agentic AI 时代:Spring AI Alibaba 1.1 发布背后的技术演进
Spring AI Alibaba 1.1 正式发布,提供极简方式构建企业级AI智能体。基于ReactAgent核心,支持多智能体协作、上下文工程与生产级管控,助力开发者快速打造可靠、可扩展的智能应用。
1256 43
|
19天前
|
人工智能 前端开发 算法
大厂CIO独家分享:AI如何重塑开发者未来十年
在 AI 时代,若你还在紧盯代码量、执着于全栈工程师的招聘,或者仅凭技术贡献率来评判价值,执着于业务提效的比例而忽略产研价值,你很可能已经被所谓的“常识”困住了脚步。
1162 88
大厂CIO独家分享:AI如何重塑开发者未来十年
|
1天前
|
存储 弹性计算 容灾
阿里云服务器ECS自定义购买流程:超详细新手入门教程
本文详细介绍阿里云服务器ECS自定义购买全流程,涵盖付费模式、地域选择、网络配置、实例规格、镜像系统、存储、公网IP、带宽计费及安全组设置等关键步骤,适合新手入门参考,助你轻松完成云服务器选购与部署。
194 121