<!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. Gameframework之微信小游戏

    Gameframework之微信小游戏 这两天测试了一个Gameframework框架游戏及资源转微信小游戏,在这里记录一下踩过的坑,望避之! 材料: 小游戏Dome用的StarForce项目. 环境 ...

  2. vue-element-admin框架连接yapi配置vue.config.js

    devServer: { host:'localhost', port:port, proxy:{ [process.env.VUE_APP_BASE_API + '/admin']: { //配置p ...

  3. TensorFlow的基础结构

    Tensorflow 是非常重视结构的, 我们得建立好了神经网络的结构, 才能将数字放进去, 运行这个结构. 这个例子简单的阐述了 tensorflow 当中如何用代码来运行我们搭建的结构. 创建数据 ...

  4. Mysql 原生语句

    1.SQL语句 1.1什么是SQL语句: SQL:结构化查询语言.关系数据库语言的国际标准. 各个数据库厂商都支持ISO的SQL标准:如普通话 各个数据库厂商在标准基础做了自己的扩展:如方言 1.2 ...

  5. dp-状压dp

    https://www.bilibili.com/video/BV1Z4411x7Kw?from=search&seid=13855865082722302053 状压介绍: 状态表示: 转移 ...

  6. Software_programming_automation_selenium

    10:52:37 Table 获取 tr list 注意会无法正常遍历获取. 修正后正常 1 public SelectionCriteriaPage checkSpecifyTag(int coun ...

  7. 一种改进后的turf.idw算法

    turf 是Advanced geospatial analysis geojson data in javascript. 官网:http://turfjs.org/ 针对github 中的源码. ...

  8. C# 前台线程 后台线程区别

    前台线程 会随进程一起结束 不管是否完成,后台线程需要执行完毕,进程才能结束 例子: class Program { static void Main(string[] args) { Thread ...

  9. 基于MIPI的高性能成像系统

    硬件组件Digilent Genesys ZU × 1 (FPGA平台) Digilent PCAM5 × 1 (MIPI摄像头) 软件组件AMD-Xilinx Vivado 设计套件 介绍从简单的嵌 ...

  10. Kubernetes二进制安装

    目录: 操作系统初始化配置 部署docker引擎 部署etcd集群 准备签发证书环境 部署Master组件 部署Worker Node组件 部署CNI网络组件 部署flannel 部署Calico 部 ...