<!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. unity检测鼠标是点击在UI上还是物体上

    void Update() { if (Input.GetMouseButtonDown(0)||(Input.touchCount >0 && Input.GetTouch(0 ...

  2. mongodb mac

    ==> mongodb To have launchd start mongodb now and restart at login: brew services start mongodb O ...

  3. 逆向工程vgenerator(一)

    前言 想要自己实现一个mybatis-generator类似的轮子,目前只实现MySQL部分的方法.利用下班时间,写了一个小项目,实现了这个功能.我准备分成三篇博客来写这个东西. 基类 /** *基类 ...

  4. python-day5内置模块time、range、sys、os、shelve、xml、max等

    @os树状目录 import os,os.path def showdir(path,depth):    if depth==0:        print(path)    for item in ...

  5. sql语句的优先级

    SQL 不同于与其他编程语言的最明显特征是处理代码的顺序.在大数编程语言中,代码按编码顺序被处理,但是在SQL语言中,第一个被处理的子句是FROM子句,尽管SELECT语句第一个出现,但是几乎总是最后 ...

  6. ssm注入失败

    今天做ssm整合时候,创建bean/注入一直出错,检查几遍没发现问题,后来发现犯了个低级错误,mapper.xml的<mapper namespace="XXXXX" > ...

  7. 1024程序员节宅男节日快乐 -- JAVA快速开发平台，JEECG 3.8宅男优化版本发布

    JEECG 3.8 版本发布,系统全面升级,重构上传组件.优化代码生成器机制! 导读   ⊙平台性能优化,系统更稳定,速度闪电般提升 ⊙系统上传组件全面重构,使用plupload组件,解决flash的 ...

  8. 《Java开发学习大纲文档》V7.0

    <Java开发学习大纲文档>V7.0简介: 本文档是根据企业开发所需要掌握的知识点大纲进行总结汇编,是Java开发工程师必备知识体系,系统化学习针对性非常强,逻辑分析能力非常清晰;技术方面 ...

  9. Linux 下安装多个 tomcat

    安装多个 tomcat 和安装一个同理,只是需要更改一些配置. 1.复制多个 tomcat 安装目录 cp /usr/local/tomcat_8080/ /usr/local/tomcat_8081 ...

  10. 知识点---<input>、<textarea>

    一.在pc端的input是一个大的知识点 [1]文本框 <input type="text"> [2] 密码框 <input type="passwor ...