<!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. 【Python】Elasticsearch和elasticsearch_dsl

    官网:https://elasticsearch-py.readthedocs.io/en/master/api.html 官网:https://github.com/elastic/elastics ...

  2. NumPy基础

    一.NumPy ndarray (一)生成ndarray 表 数组生成函数 函数 描述(默认数据类型是float64) array 将输入数据(序列型对象)转换为ndarray,若不显示的指定数据类型 ...

  3. 什么是P2P流标

    1.被动流标:在规定的投标时间内,一般是7天,没有凑齐这笔借款,就流标了: 2.主动流标:借款人或平台原因,将为投满的标下架,做流标处理 介绍: 对于投资者来说,在投资P2P理财的时候,可能会遇到过流 ...

  4. Redis物理文件结构

    Redis物理文件结构  对于数据库,个人习惯先从物理结构文件入手,整体上看一下有哪些文件,都是什么作用.类似于MySQL,数据文件和配置文件是Redis最基本也是做主要的两个物理文件之一,相比MyS ...

  5. C# 异步机制

    Delegate.Invoke Delegate.Invoke is used to execute a delegate on the current thread. A delegate is j ...

  6. File和FileStream的区别

    File和FileStream的区别直观点:File是一个静态类:FileStream是一个非静态类.File:是一个文件的类,对文件进行操作.其内部封装了对文件的各种操作(MSDN:提供用于创建.复 ...

  7. Task的在主线程处理异常信息的Helper类

    最近使用task时候需要把异常记录日志,直接注入非单例模式的实例进入异步线程,在高并发情况下会出现一些问题. 所以需要把异常反馈给主线程 ,并且不在主线程里进行等待,研究相关资料后,自己写了一个简单的 ...

  8. Sping4之注入参数

    Spring的依赖注入不仅可以注入基本类型,也可以注入包括model,list等等类型 package com.hongcong.test; import org.springframework.co ...

  9. python表格导出--xlwt的使用

    xlwt可以用来导出excel表,下面介绍一下它的用法: 1. 安装xlwt模块 pip install xlwt 2. 使用xlwt模块:后端接口编写 import xlwt #导出表格接口 def ...

  10. python基础与docker

    创建虚拟环境python3 -m venv venv (说明:python 2.X 并不支持) 激活虚拟环境macOS/Linux: source venv/bin/activateWindows: ...