<!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实现两张图片拼接

    纵向拼接 from PIL import Image def image_splicing(pic01, pic02): """ 图片拼接 :param pic01: 图 ...

  2. windows下gitlab-ci.yml配置进入某一目录找不到，无权限

    打开任务管理器查看gitlab-runner所使用的的用户 更改gitlab-runner服务权限, 找到gitlab-runner服务,右键-属性-登陆,选择[此账户]点击[浏览] 选择具有权限的账 ...

  3. monkey自动化脚本

    获取第三方安装包:手机需root,adb shell>cd data/app>ls(获取相应app信息)>cd +相应app信息>base.apk(安装包) 获取第三方安装包: ...

  4. react -hook 项目搭建

    1.脚手架搭建 2.清除多余文件 3.搭建项目文件列表 4.引入公共样式 5.页面构建LOGIN 6.安装路由 v5 v6有区别 7.搭建路由文件router.js 懒加载配合supence使用 8. ...

  5. java 注解基础

    java 内置注解 注解 作用 描述 @Override 将覆盖父类中的方法 作用在子类的方法上 @Deprecated 代码被弃用 使用了被@Deprecated注解的代码则编译器将发出警告 @Su ...

  6. 微服务减少jar包体积

    <build> <finalName>${project.artifactId}</finalName> <plugins> <!--打包jar- ...

  7. react项目--redux封装

    index.ts 1 const store = { 2 state: { 3 num: 20, 4 }, 5 actions: { 6 // 放同步的代码 7 add1(newState: { nu ...

  8. 「postOI」以另一种方式证明 FWT

    记号 \(\otimes\) 代表或/与/异或卷积: \(\oplus\) 代表"拼接",例如 \(A\oplus B\) 即将 \(B\) 接在 \(A\) 的后面: \(+,- ...

  9. PHP-循环文件夹-yield-生成器

    <?php define(DS, DIRECTORY_SEPARATOR); function gen_dir($path='.'){ $c_dir = opendir($path); whil ...

  10. 10个.NetCore实用的开源框架项目

    今天我们一起梳理下10个,比较受到大家欢迎的.NetCore开源框架项目.1.FytSoaCms 前后端分离CMS系统 项目简介 这是一个基于.Net 3构建的简单.跨平台.模块化建站系统.系统业务简 ...