刚开始看这个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. installEventFilter可以安装到任何QObject的子类，并不仅仅是UI组件。事件过滤器和安装过滤器的组件必须在同一线程，在它们分属在不同线程时，事件过滤器也是不起作用的

    Qt的事件知识点: ①事件对象创建完毕后,Qt 将这个事件对象传递给 QObject 的 event() 函数.event() 函数并不直接处理事件,而是将这些事件对象按照它们不同的类型,分发给不同的 ...

  2. RedHat 6.6下安装nginx,配置HTTPS

    1.安装依赖包 yum -y install pcre-devel openssl-devel zlib-devel 2.下载nginx安装包到服务器上,当前使用版本nginx-1.15.5.tar. ...

  3. Alpine Linux配置使用技巧【一个只有5M的操作系统（转）】

    Alpine Linux是一个面向安全应用的轻量级Linux发行版.它采用了musl libc和busybox以减小系统的体积和运行时资源消耗,同时还提供了自己的包管理工具apk. Alpine Li ...

  4. （25）HttpClient session

    session概述 session机制 session机制是一种服务器端的机制,服务器使用一种类似于散列表的结构(也可能就是使用散列表)来保存信息. 当程序需要为某个客户端的请求创建一个session ...

  5. net.tcp协议的wcf服务在远程计算机无法调用问题分析

    可能原因1:net.tcp监听端口服务没有启动. 可能原因2:防火墙阻止了端口服务器路径访问. 可能原因3:配置文件路径endpoint路径和引用路径不一致 可能原因4:权限受限制.

  6. 系统管理命令之who am i

    who am i 显示的是实际用户的用户名,即用户登陆的时候的用户ID.此命令相当于who -m. 用Linux的术语来解释就是:(实际用户=uid,即user id.有效用户=euid,即effec ...

  7. 牛客国庆集训派对Day5 Solution

    A    璀璨光滑 留坑. B    电音之王 蒙特马利大数乘模运算 #include <bits/stdc++.h> using namespace std; typedef long ...

  8. 无界面Ubuntu服务器搭建selenium+chromedriver+VNC运行环境

    搭建背景 有时候我们需要把基于selenium的爬虫放到服务器上跑的时候,就需要这样一套运行环境,其中VNC是虚拟的显示模式,用于排查定位线上问题以及实时运行情况. 搭建流程 安装虚拟输出设备:sud ...

  9. bzoj1619 / P2919 [USACO08NOV]守护农场Guarding the Farm

    P2919 [USACO08NOV]守护农场Guarding the Farm 相似题:P3456 [POI2007]GRZ-Ridges and Valleys 按海拔是否相同分块 每次bfs海拔相 ...

  10. bzoj1999 / P1099 树网的核

    P1099 树网的核 (bzoj数据加强) 前置知识:树的直径 (并不想贴我的智障写法虽然快1倍但内存占用极大甚至在bzoj上MLE) 正常写法之一:用常规方法找到树的直径,在直径上用尺取法找一遍,再 ...