<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的具名插槽的使用</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<body>
<div id="app">
<child>
<header slot='header'>header</header>
<footer slot='footer'>footer</footer>
</child>
</div>
<script>
Vue.component("child", {
template: `
<div>
<slot name='header'></slot>
<div>这里是内容区</div>
<slot name='footer'></slot>
</div> `,
});
var vm = new Vue({
el: '#app'
})
</script>
</body>
</html>

vue中具名插槽的使用的更多相关文章

  1. vue中的插槽(slot)

    vue中的插槽,指的是子组件中提供给父组件使用的一个占位符,用<slot></slot>标签表示,父组件可以在这个占位符中填充任何模板代码,比如HTML.组件等,填充的内容会替 ...

  2. 在vue中使用插槽 slot

    插槽(slot)这个概念非常重要 插槽的使用场景1:在子组件里面显示父组件的dom <div id='root'> <child content = '<p>Dell&l ...

  3. Vue中的插槽---slot

    一:什么是插槽? 插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性. 插槽显不显示.怎样显示是由 ...

  4. 详解Vue中的插槽

    作者: 小土豆 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/2436173500265335 什么是插槽 在日常的项目 ...

  5. vue中的插槽slot

    插槽(slot):是组件的一块HTML模板,父组件决定这块模板显不显示以及怎么显示. 位置由子组件自身决定(slot现在组件template的什么位置,父组件传过来的模板将来就显示在什么位置) 匿名插 ...

  6. vue中的插槽slot理解

    本篇文章参考赛冷思的个人博客 1.函数默认传参 在我们写js函数我们的可能会给他们一个默认的参数,写法是 function show(age,name){ var age = age || 20; v ...

  7. vue中的插槽

    匿名插槽 // comp1 <div> <slot></slot> </div> // parent <comp>hello</com ...

  8. vue中slot插槽

    插槽就是vue实现的一套内容分发的API,将插槽元素作为承载分发内容的出口. 也就是说在组件模板中默认占用一个位置,当使用组件标签时候,组件标签的内容就会自动替换掉内容 slot中可以设置一些默认的内 ...

  9. Vue中slot插槽的使用

随机推荐

  1. RAMDISK 内存盘工具推荐

    好了直接推荐, 1.魔方内存盘  使用方便 ,但是关机后消失.绿色 2.Primo Ramdisk Ultimate Edition5.5 3.GiliSoft RAMDisk 4.QSoft RAM ...

  2. Flask--WTForms

    简介 WTForms是一个支持多个web框架的form组件,主要用于对用户请求数据进行验证. 安装:pip3 install wtforms 用户登录注册示例 1. 用户登录 当用户登录时候,需要对用 ...

  3. 来源于知乎专栏:https://zhuanlan.zhihu.com/p/29619457

    1. 校验数字的表达式 1 数字:^[0-9]*$ 2 n位的数字:^\d{n}$ 3 至少n位的数字:^\d{n,}$ 4 m-n位的数字:^\d{m,n}$ 5 零和非零开头的数字:^(0|[1- ...

  4. SQL server 2008(Linux安装)

    今天应公司的要求,需要在阿里云上安装sql server 在本地使用,由于自己原来没有涉及过这样的安装所以走了很多的弯路.现在将我的安装过程与大家分享,希望能够帮到想要学习这个方面的人.以下是我用Ce ...

  5. Disconnected from the target VM, address: '127.0.0.1:57178', transport: 'socket'

    idea 执行测试单元debug时控制台出现:Disconnected from the target VM, address: '127.0.0.1:57178', transport: 'sock ...

  6. Jmeter5.1.1+python调用python脚本

    1.下载jython https://www.jython.org/downloads.html 下载Download Jython 2.7.0 - Standalone Jar : For embe ...

  7. TCP协议-连接建立和释放

    三次握手: (1)客户端向服务器端TCP请求连接,向服务器端发送控制位SYN=1,序号seq=x的请求报文.(x是随机产生的,且不能为0) (2)服务器端接收到请求报文后,若同意建立连接,则向客户端发 ...

  8. Nginx性能调优之buffer参数设置

    Nginx 的缓存功能有:proxy_cache / fastcgi_cache proxy_cache的作用是缓存后端服务器的内容,可能是任何内容,包括静态的和动态.fastcgi_cache的作用 ...

  9. Django ORM中常用字段和参数

    一些说明: 表myapp_person的名称是自动生成的,如果你要自定义表名,需要在model的Meta类中指定 db_table 参数,强烈建议使用小写表名,特别是使用MySQL作为后端数据库时. ...

  10. C++文档补充

    string s("100010"); bitset<5>  b(s,2,2); 只有上图这样写,下图这样是错的.记住.http://www.cppblog.com/k ...