<!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. vue 使用import之后就会报Object(...) is not a function的错

    最近在学习vue,学到了路由,vue-router, 写demo的时候,想引入import VueRotuer from "vue-router",但是添加这句引用浏览器就会报错, ...

  2. Java--判空方法

    方法有StringUtils.isBlank() , StringUtils.isNotBlank() , StringUtils.isEmpty(); 使用关系 StringUtils.isNotE ...

  3. Server2008通过bat命令自动定时备份MySQL数据库

    第一种方法: 环境: MySQL 安装位置:D:\MySQL 论坛数据库名称为:Db_Test 数据库备份目的地:D:\db_bak\ 1.首先新建一个bat文件 rem ************** ...

  4. SAR成像(一)：线性调频信号(LFM)和脉冲压缩

    文章仅为个人理解,如有不妥之处欢迎指正. 1.脉冲压缩目的和意义 在雷达系统中,距离分辨率是很重要的一项性能指标,它决定了雷达能分辨两个单元之间的最小距离,更通俗的,即雷达分辨相离较近物体的能力.而决 ...

  5. for/in 语句用于循环对象属性

    for/in 语句用于循环对象属性. 循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作. JavaScript 支持不同类型的循环: for - 循环代码块一定的次数 for/in  ...

  6. .NET Framework 中对webapi进行jwt验证

    最近在项目中对webapi进行了jwt验证,做一个记录 有关于jwt生成和验证token的操作全部记录在jwthelper.cs文件中: /// <summary> /// 授权JWT类 ...

  7. npm升级报错,没有权限.ERRERR!The operation was rejected by your operating system. npm ERR!Error: EPERM: operation not permitted, rename

    问题描述 Windows system32>npm installg npm 2335 error code EEXIST2336 error path D:\Program Files\nod ...

  8. 一、100ASK_IMX6ULL嵌入式裸板学习_LED实验（知识点补充二）

    MUX是什么?   MUX(multiplexer数据选择器):   在多路数据传送过程中,能够根据需要将其中任意一路选出来的电路,叫做数据选择器,也称多路选择器或多路开关.   多路转换器的作用主要 ...

  9. OS-lab1

    OS-lab1 boot boot文件夹中只有start.S文件,这个文件用于初始化内核.关掉中断,设置内核栈,并跳转到main函数. init init.c 执行初始化操作. main.c 主函数, ...

  10. Cendos中启动docker失败的问题

    注:在 Windows中使用Linux虚拟机中使用Cendos 刚开始安装Docker时没有任何错误, 但是在后续的docker启动过程中, 出现以下问题: 按提示使用 systemctl statu ...