<!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. tdlib成功编译版本20230205（java）

    tdjni是java本地调用接口dll文件夹下的三个动态链接是供tdjni调用的使用时这三个加到系统环境变量里 编译文件在本人的文件里,可以下载

  2. 初始化控件panel大小和相对父容器居中

    /// <summary> /// 初始化界面大小 /// </summary> protected void InitForm() { int winwith = Scree ...

  3. VMware-实用网站

    二进制包的获取方式 ftp://ftp.redhat.com推荐网站  www.rpmfind.net相应的官方网站http://www.mysql.com

  4. vite+vue3.0+ts搭建项目

    项目git地址:https://gitee.com/suyong01/vue3-ts-template vue+ts+vite项目初始化 # npm 6.x npm init @vitejs/app ...

  5. JavaSE 日期时间类整理

    一.创建日期对象 1.创建日期对象 //1.直接创建日期 Date date1 = new Date(); //2.创建指定日期 使用Date类 目标 2000-5-10 Date date2 = n ...

  6. centos安装Jenkins报错

    [SKIPPED] jenkins-2.249.3-1.1.noarch.rpm: Already downloaded warning: /var/cache/dnf/jenkins-0919f06 ...

  7. Windows下安装和使用Masscan

    http://zone.secevery.com/article/1098 0x00 前言Masscan号称最快的互联网端口扫描器,本文来探测一下Masscan在Windows下的安装和使用.mass ...

  8. java学习：八大基本类型变量

    1.类 在java中用class来定义一个类,类是java程序的基本单位 类描述的是具有共性的一类事物,所以我们又可以把类称作为模板技术   如何理解共性: 具有相同的属性-->java变量 具 ...

  9. mysql正则替换 正宗！

    先看个官方例子 mysql> SELECT REGEXP_REPLACE('a b c', 'b', 'X'); +-----------------------------------+ | ...

  10. java spring 理解

    1.spring IOC容器 其实就是 new 了一个 ApplicationContext 类对象.->应用上下文对象. 2.应用上下文对象 实例化.配置,并管理 bean. 所以上下文对象是 ...