<!DOCTYPE html>

<html>

    <head>

        <script src="a.js"></script>

    </head>

    <body>

        <div id="root"></div>

    </body>

<script>

const app = Vue.createApp({

    template:`

    <layout>

        <template v-slot:header>

            <div>header</div>

        </template>

        <template v-slot:footer>

            <div>footer</div>

        </template>

    </layout>

    `

})

app.component('layout',{

    template:`

        <div>

            <slot name="header"></slot>

            <div>content</div>

            <slot name="footer"></slot>

        </div>

    `

})

const vm = app.mount('#root')

</script>

</html>

vvv,具名插槽的更多相关文章

  1. vue中具名插槽的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. vue(基础二)_组件，过滤器，具名插槽

    一.前言 主要包括:  1.组件(全局组件和局部组件)                     2.父组件和子组件之间的通信(单层)                     3.插槽和具名插槽     ...

  3. [Vue]组件——插槽：slot（匿名插槽，具名插槽）与slot-scope（作用域插槽）

    1.单个插槽 | 匿名插槽 1.1<navigation-link> 子组件定义为: <a v-bind:href="url" class="nav-l ...

  4. 第九十篇：Vue 具名插槽

    好家伙 1.什么是具名插槽? 来简单理解一下, 具有自己名字的插槽,就是具名插槽 我们来尝试使用一下具名插槽: 在Article.vue组件中: <template> <div cl ...

  5. Vue学习之--------插槽【默认插槽、具名插槽、作用域插槽】（2022/8/30）

    插槽Vue.js官网介绍:https://vuejs.org/guide/components/slots.html 会牵涉到template的用法.占位.实际不渲染到页面中 1.默认插槽: 1.1 ...

  6. 具名插槽 slot （二）

    slot 是父组件与子组件的通信方式可以将父组件的内容显示在子组件当中或者说可以将 让你封装的组件变的更加的灵活,强壮! 在子组件中  通过为多个slot进行命名.来接受父组件中的不同内容的数据  这 ...

  7. 第九十一篇：Vue 具名插槽作用域

    好家伙, 1.作用域插槽 插槽在定义的时候,可以定义一些属性,便于在父组件中使用 来看看代码: Article.vue组件中: <template> <div class=" ...

  8. vue2.0使用slot插槽分发内容

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. Vue结合slot插槽分发父组件内容实现高度复用、更加灵活的dialog组件

    之前写过一篇关于vue实现dialog会话框组件的文章(http://www.cnblogs.com/fozero/p/8546883.html)[http://www.cnblogs.com/foz ...

  10. vue-render函数和插槽

    Vue render函数,官方文档定义绝大部分时候我们使用template 来创建html 模板,但是纯html 和css都基本上都不具有编程能力,而当我们想使用 javascript的编程能力时,我 ...

随机推荐

  1. 零基础小白速成python？有了这本书你还在担心什么？

    <Python编程快速上手>书籍PDF高清版免费下载地址 提取码:bc9h 内容简介  · · · · · · 如今,人们面临的大多数任务都可以通过编写计算机软件来完成.Python是一种 ...

  2. 数据库多表连接查询中使用group by分组语句，Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column 'XXX' which is not functionally dependent on columns in GROUP BY claus

    需求描述: 要是用两表联合查询,并对查询的结果进行分组:sql如下: 1 SELECT 2 a.`id`, 3 a.`fr_num`, 4 b.`ent_status` 5 FROM 6 `table ...

  3. Delete `␍` prettier/prettier Vue 可悬浮按钮

    Delete `␍` prettier/prettier 代码格式化不一致,换行符冲突.UNIX/Linux 使用的是 0x0A(LF), DOS/Windows 一直使用 0x0D0A(CRLF) ...

  4. Windos下 java后台软件服务化（举例）-WinSW

    WinSW-软件服务化 1.1 举例:ApiWintool可执行jar ApiWintool.exe ApiWintool.jar ApiWintool.xml install.cmd uninsta ...

  5. Vuex扫描自定义文件夹下的所有文件

    解决问题:当我们规范 model 统一放在某个文件夹下,且可以通过子文件夹分类.当新加model时又不想去修改别的地方. 代码 // /src/sotre/index.js 1 import { cr ...

  6. JAVA图片压缩到指定大小

    这是压缩到小于300KB的,循环压缩,一次不行再压一次, 不废话,直接贴代码 <!-- 图片缩略图 --> <dependency> <groupId>net.co ...

  7. cookie是什么？有什么用？

    cookie是什么? 储存在用户本地终端上的数据,是网站为了识别用户和跟踪回话而存储在用户本地终端中的文本数据 cookie就是保存在客户端的纯文本文件,比如txt文件,所谓的客户端就是我们自己的本地 ...

  8. HCIP-进阶实验05-Eth-Trunk配置部署

    HCIP-进阶实验06-Eth-Trunk配置部署 1 实验需求 1.1 实验拓扑 1.2 实验环境说明 无 1.3 实验需求 本实验共采用3台三层交换机.1台路由器.认真分析实验需求,明确每步考查的 ...

  9. Java基础学习：11、断点调试

    1.可以用来查看错误以及查看代码的运行过程. 2.如何使用:

  10. flutter CustomScrollView多个滑动组件嵌套

    CustomScrollView是使用Sliver组件创建自定义滚动效果的滚动组件.使用场景: ListView和GridView相互嵌套场景,ListView嵌套GridView时,需要给GridV ...