刚开始看这个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. Python开发【Tornado】：异步Web服务（一）

    异步Web服务 前言: 到目前为止,我们已经看到了许多使Tornado成为一个Web应用强有力框架的功能.它的简单性.易用性和便捷性使其有足够的理由成为许多Web项目的不错的选择.然而,Tornado ...

  2. Nginx 使用总结

    一.使用 nginx 实现 灰度发布 灰度发布,现在是很多大项目的一个标配运维特性,我们可以将一个“新的版本代码”发布到集群中的少数几台(组)机器上,以便引入线上少量真实用 户进行测试,用于验证产品改 ...

  3. sshd:root@notty解决方法

    sshd:root@notty解决方法 [复制链接]--http://bbs.chinaunix.net/forum.php?mod=viewthread&tid=2050551 cat /e ...

  4. 如何使用OpenCart 2.x Event事件系统

    如何使用OpenCart 2.x Event事件系统 OpenCart 2.x 包含很多新特性,其中之一就是专为开发者提供的事件系统,Event System.它允许你在不修改原有系统代码的基础上( ...

  5. NiFi REST API 的使用

    一.概述 为方便用户使用 NiFi 进行二次开发,NiFi 为开发者提供了 NIFI REST API. 关于 API 的详细介绍,请参见官网 NIFI REST API.这里仅给出一些注意的小细节. ...

  6. VS2010/MFC编程入门之前言

    鸡啄米的C++编程入门系列给大家讲了C++的编程入门知识,大家对C++语言在语法和设计思想上应该有了一定的了解了.但是教程中讲的例子只是一个个简单的例程,并没有可视化窗口.鸡啄米在这套VS2010/M ...

  7. 工具推荐. 在线unix, 在线python/perl脚本测试环境

    在线python, perl, javascript, Lisp, Ruby等  http://melpon.org/wandbox/ 正则表达式在线测试工具 http://tools.jb51.ne ...

  8. flask使用ajax提交表单

    Flask中使用ajax提交表单刷新数据,避免提交表单后使用return render_temp()会刷新页面 <form id ="test_form"> {{ fo ...

  9. 反射_IsDefined判断方法上有自定义的标签

    在.NET 4.0(当然也包括4.0以前的版本)下,用反射判断某个方法是否运用了自定义Attribute时,可以通过调用MethodInfo的IsDefined()方法进行确认.当然,IsDefine ...

  10. 课堂练习——Hash 20162305

    课堂练习--Hash 20162305 课堂练习要求 利用除留余数法为下列关键字集合的存储设计hash函数,并画出分别用开放寻址法和拉链法解决冲突得到的空间存储状态(散列因子取0.75) 关键字集合: ...