<!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. Problem A: Apple(高斯消元)

    可以发现具有非常多的方程, 然后高斯消元就能85分 然而我们发现这些方程组成了一些环, 我们仅仅设出一部分变量即可获得N个方程, 就可以A了 trick 合并方程 #include <cstdi ...

  2. yml文件搞一波

    引用https://www.cnblogs.com/zslli/p/8717483.html https://www.cnblogs.com/baoyi/p/SpringBoot_YML.html 划 ...

  3. Postman runner参数化

    按照下面图片的顺序操作吧~ lets go 1.把要做参数化的字段的value用花括号标识起来,如:{{phone}} 2.准备一个csv的文件,把每次请求接口的参数按下图填写好,第一行写字段名称(p ...

  4. Shiro的认证和权限控制

    权限控制的方式 从类别上分,有两大类: - 认证:你是谁?–识别用户身份. - 授权:你能做什么?–限制用户使用的功能. 权限的控制级别 从控制级别(模型)上分: - URL级别-粗粒度 - 方法级别 ...

  5. sql注入、csrf

    ◎sql注入产生的原因?又如何防御sql注入? SQL注入,就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令.具体来说,它是利用现有应用 ...

  6. Android 开发 Fresco框架点击小图显示全屏大图实现 ZoomableDraweeView

    目标需求 实现一张小图片,被点击后变成一个在整个屏幕上显示的大图片.类似于微信朋友圈的图片. 实现流程 1.Fresco基本初始化 2.下载并且导入ZoomableDraweeView 它是实现大图的 ...

  7. SAML2.0 SP端处理

    sso response解析 import java.io.ByteArrayInputStream; import java.io.InputStream; import java.security ...

  8. python使用xlrd， xlwt读取excel文件和 写入excel文件

    python 3.6 首先在cmd下执行安装指令 xlre和xlwt : pip  install  xlre    pip install  xlwt #-*- coding: utf8 -*-im ...

  9. [Torch]提示torch.inverse错误

    来源:https://blog.csdn.net/zziahgf/article/details/72548128 当执行官方第二个例子时,提示xs = torch.inverse(A)*b错误 是因 ...

  10. JavaScript值全等判断

    作为开发员,很多时候拿到数据之后都是要做数据判断,比较特别的情况就是我们需要做数组判断和对象判断,经常的我们就array === array ,object === object;但是可惜是我们得到的 ...