<!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. sql中的等于和不等于， '=' ,'!=','<>','is null'....

    不等于:<> ,!=,~= ,^= 这四个符号据说都可以在oracle中表示不等于,但是试了之后发现<> ,!= ,^=是可以的,~=不行,需要注意的是,只有<>是 ...

  2. POI导入demo

    前言 使用上篇博文的导入方法,写一个简单的导入demo.其实有了工具类之后就没啥难度了,也就只简单的拿数据.先写个简单的,然后想办法实现动态读取吧,这样读取其实还是比较烦的,每次该模板都要改代码,说到 ...

  3. 【HDFS API编程】查看HDFS文件内容、创建文件并写入内容、更改文件名

    首先,重点重复重复再重复: /** * 使用Java API操作HDFS文件系统 * 关键点: * 1)创建 Configuration * 2)获取 FileSystem * 3)...剩下的就是 ...

  4. 14Linux_BIND-Linux就该这么学

    bind 域名解析 域名→ip地址:正向解析 ip地址→域名:反向解析 主服务器:做管理 从服务器:同步 缓存服务器:转发

  5. nodejs 实现文件拷贝

    通过4中不通的方式实现对一个文件的拷贝 方式一:readFile 异步一次性读取文件再写入 //异步形式读取文件 function copyFile(url){ const extName = pat ...

  6. 关于JVM加载内存图学习小密招

    先看如下代码: Person.java public class Person { private String name; private int age; static int count = 0 ...

  7. Python module ---- re

    Python 的 re 模块(Regular Expression 正则表达式)提供各种正则表达式的匹配操作,在文本解析.复杂字符串分析和信息提取时是一个非常有用的工具.python的re模块,在绝大 ...

  8. as3 加载进来的swf进行缩放

    private function swfComHdl(_loader:Loader, _data:*= null){ frameLder = _loader; gameMC = frameLder.c ...

  9. Abaqus用Dload子程序实现移动载荷

  10. 通过crt修改数据库中的存储过程

    mysql -u idc_user -pidc_user123 通过crt修改数据库中的存储过程PRO_RET_HD_TZXW STEP1:在crt中查看数据库中的存储过程PRO_RET_HD_TZX ...