刚开始看这个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. Currency Exchange---poj1860 ( spfa, 回路，最长路）

    题目链接:http://poj.org/problem?id=1860 题解: 两种情况YES,一种是存在正权回路: 一种是求最长路后,实现了增值,也是YES: 用spfa来判断是否存在正权回路,其实 ...

  2. php计算中英文混合或中文字符串的字数

    转载来源链接: http://blog.csdn.net/hueise_h/article/details/22920937 php的strlen和mb_strlen用于统计字符个数.中英文混合的字符 ...

  3. GBDT XGBOOST的区别与联系

    Xgboost是GB算法的高效实现,xgboost中的基学习器除了可以是CART(gbtree)也可以是线性分类器(gblinear). 传统GBDT以CART作为基分类器,xgboost还支持线性分 ...

  4. Django进阶 (二)

    规范 确立规范的好处: 代码可读性高 方便代码的定位极其查找 为以后代码扩容带来便利 场景: 在多个APP的场景下,单个app的URL函数功能较多的时候,我们可以通过以下方法来解决. 把Views写成 ...

  5. Hadoop 编写WordCount

    本文发表于本人博客. 前面几次讲了关于Hadoop的环境搭建.HDFS操作,今天接着继续.本来Hadoop源码中就有一个例子WordCount,但是今天我们来自己实现一个加深对这个Mapper.Red ...

  6. Wannafly挑战赛28 Solution

    A:msc和mas Solved. 考虑斐波那契数列,即最多加45次即会超过1e9,直接暴力即可 #include <bits/stdc++.h> using namespace std; ...

  7. c++第二十四天

    p126~p128: 1.关系运算符作用于算数类型和指针类型. 2.逻辑运算符作用于任意能转换成布尔类型值的类型. 3.以上两种运算的运算对象和运算结果都是右值. 4.逻辑与和逻辑或的运算策略:短路求 ...

  8. CSS 分页实例

    CSS 分页实例 一.简单分页 如果你的网站有很多个页面,你就需要使用分页来为每个页面做导航. 以下实例演示了如何使用 HTML 和 CSS 来创建分页: <!DOCTYPE html> ...

  9. [3140] Sublime Text 2.x, 3.x 通用注册码、密钥集合

    [3140] Sublime Text 2.x, 3.x Universal License Keys collection for Win, Mac & Lin 所有这些许可证密钥都被测试( ...

  10. 20145325张梓靖 《Java程序设计》第5周学习总结

    20145325张梓靖 <Java程序设计>第5周学习总结 教材学习内容总结 try catch Java中所有错误都会被打包为对象.如果某个方法声明会抛出Throwable或子类实例,只 ...