刚开始看这个slot的时候有点蒙，想了几分钟才明白过来，汗颜

<script>

  var mycompoent = Vue.extend({

    template:"<div><h2>子组件标题</h2><slot>如果有内容不显示这句话</slot></div>"

})

new Vue({

 el:"#app",

components:{

   "mycomponent":mycompoent

  }

})

</script>
<body>

  <div id="app">

        <h1>父组件标题</h1>

<mycomponent>

   <p>因为有p标签元素，所以slot里面的内容不会显示，可以试试把p标签不要试试</p>

</mycomponent>

  </div>

</body>

vue.js单个slot的更多相关文章

  1. vue.js 中slot 用处大（转载）

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...

  2. 关于vue.js中slot的理解

    slot这块看官网文档,起初有点不懂,仔细研究还是最终理解了,slot是用来干嘛的呢,先看下一个例子: <script src="https://unpkg.com/vue/dist/ ...

  3. vue.js的<slot>

    使用插槽分发内容在封装vue组件的时候,很多时候就不得不使用到vue的一个内置组件<slot>.slot是插槽的意思,顾名思义,这个<slot>组件的意义是预留一个区域,让其中 ...

  4. Vue.js插槽slot和作用域插槽slot-scope学习小结

    一般来说,在Vue项目中使用父子组建时,都是把通用的HTML结构提取出来写成一个子组件,需要动态展示的数据用过prop属性传递,不过有时候我们可能想给子组件传递一个HTML代码,这个时候用prop不太 ...

  5. Vue.js 作用域、slot用法（单个slot、具名slot）

    作用域 在介绍slot前,需要先知道一个概念:编译的作用域.比如父组件中有如下模板: <child-component> {{message}} <child-component&g ...

  6. vue.js之数据传递和数据分发slot

    一.组件间的数据传递 1.父组件获取子组件的数据 *子组件把自己的数据,发送到父级 *vm.$emit(事件名,数据); *v-on: @ 示例用法:当点击send按钮的时候,"111&qu ...

  7. vue.js中的slot

    vue.js 中的 slot 一.slot 的作用 调用组件的时候,对于数据,我们会用props将数据从父组件传至子组件.但是,如果从父组件到子组件,单纯是页面局部渲染的改变,slot会更合适. 二. ...

  8. Vue.js 组件的三个 API：prop、event、slot

    组件的构成 一个再复杂的组件,都是由三部分组成的:prop.event.slot,它们构成了 Vue.js 组件的 API.如果你开发的是一个通用组件,那一定要事先设计好这三部分,因为组件一旦发布,后 ...

  9. Vue.js——60分钟组件快速入门（下篇）

    概述 上一篇我们重点介绍了组件的创建.注册和使用,熟练这几个步骤将有助于深入组件的开发.另外,在子组件中定义props,可以让父组件的数据传递下来,这就好比子组件告诉父组件:"嘿,老哥,我开 ...

随机推荐

  1. SpringCloud 进阶之Zuul(路由网关)

    1. Zuul(路由网关) Zuul 包含了对请求的路由和过滤两个最主要的功能; 路由功能:负责将外部请求转发到具体的微服务实例上,是实现外部访问统一入口的基础; 过滤功能:负责对请求的处理过程进行干 ...

  2. Qt:小项目仿QQ修改头像界面，技术点记录

    最近写了一个修改头像功能的UI,布局参考了QQ目前的修改头像界面.如下图 这里主要说明一下两个地方的技术:1.头像图片上层的遮罩层,圆形外部为灰色,内部为全透明:2.上传图片宽高比例可以通过鼠标拖拽移 ...

  3. SQL Server批量数据导出导入BCP&Bulk使用

    数据导出导入,首先考虑使用什么技术实现导出与导入利用BCP结合Bulk技术实现数据的导出与导入 1.bcp数据导出(这里是命令行方式),导出的数据需是格式化的,有两种方式可选 a.对传输的数据格式要求 ...

  4. poj 2723 Get Luffy Out 2-SAT

    两个钥匙a,b是一对,隐含矛盾a->!b.b->!a 一个门上的两个钥匙a,b,隐含矛盾!a->b,!b->a(看数据不大,我是直接枚举水的,要打开当前门,没选a的话就一定要选 ...

  5. VS Code 终端窗口无法输入命令的解决方案

    问题 今天打开vs code,打开终端窗口,发现不能输入命令了 解决方法 邮件桌面 vscode的快捷键,打开“兼容性”标签,勾选"以管理员身份运行此程序" 结果 修改之后重启vs ...

  6. 3.2 Templates -- The Application Template

    1. 当你的应用程序启动时application模板是默认被渲染的的模板. 2. 你应该把你的header, footer和其他任何的装饰内容放到这里.此外,你应该有至少一个{{outlet}}:它是 ...

  7. html5 七巧板

    <!DOCTYPE html><html>    <canvas id="diag" height="200" width=&qu ...

  8. 2018-2019 ACM-ICPC, Asia Seoul Regional Contest

    ProblemA Circuits Solved. 题意: 有$n$个矩形,可以放两条平行与$x$轴的线,求怎么放置两条无线长的平行于$x$轴的线,使得他们与矩形相交个数最多 如果一个矩形同时与两条线 ...

  9. SQL :模糊查询，转义字符

    1. 查询table表name列包含 '_BCE' 的记录 select * from table where name like '_BCE%' ABCEDF _BCEFG _BCEDF 3 row ...

  10. linux 常用命令总结(二)

    1. linux下以指定的编码打开文件:LANG=zh_CN vi fileName 2. 查看系统内存使用,可以使用free -m 或 top 3. 使用env查看所有环境变量 4. df –h 查 ...