<!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. springmvc 能进入Controller，但是前端页面还是404

    问题现象: 1.Controller里面的方法上已经加了注解 @ResponseBody 2.能进入controller的方法里面: 3.前端返回状态码 404: 4.控制台没有异常信息: 问题原因: ...

  2. 回归分析-2.X 简单线性回归

    2.1 简单线性回归模型 y与x之间的关系假设 \(y=\beta_0+\beta_1x+\varepsilon\) \(E(\varepsilon|x)=0\) \(Var(\varepsilon| ...

  3. .net5的安装部署条件

    1.安装vs2019最新版本 2.安装 .net5最新版本的的Hosting Bundle 下载地址:https://dotnet.microsoft.com/download/dotnet/5.0 ...

  4. 记一次SpringBoot整合WebSocket 找不到ServerEndpointExporter类的问题

    package com.mengxiangnongfu.cms.framework.configure; import org.springframework.context.annotation.B ...

  5. AR设备使用Vuforia的优化

    主要是设置识别的范围,在应用内检测当前识别图和我的距离,以及识别图和我的角度,当进入了规定的范围和角度后, 在进行定位功能.我目前用的是距离在两米内 摄像机和识别图的角度正负不超过30度的范围 Vuf ...

  6. 硬件IIC的重映射使用问题

    目录 沁恒的蓝牙系列芯片,有映射硬件模块去其他引脚的功能,可以配置各芯片的功能引脚重映射寄存器(R16_PIN_ALTERNATE),或者使用函数GPIOPinRemap函数进行配置. 比如说想要配置 ...

  7. containerd 卸载

    一.创建脚本 cat > remove.sh <<EOF #!/bin/bash # 删除contained命令及配置 rm -rf /usr/local/bin/ rm -rf / ...

  8. CSS3实现图片滚动

    body{ margin: 0; padding: 0px; } #banner{ margin:20px auto; width: 600px; position: relative; overfl ...

  9. 如何使用命令行直接运行PHP脚本程序

    在我的博客里有一些文章是和解码或者处理文件有关,其中有些自动化工作比较简单,使用了一些PHP程序来编写处理,这样写起程序来也比较快,因为是纯过程的任务,不想用C#来处理. 写完PHP的脚本程序后,保存 ...

  10. Qt设置程序图标

    修改.pro文件添加一下代码:要求.pro文件和.ico文件在同一文件夹下 RC_ICONS = xxx.ico (你的程序图标)最后重新构建一次即可