刚开始看这个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. stm8s 时钟库函数选择内部RC初始化

    //本文选择16M内部RC震荡.分频为1 即系统时钟为16M void CLK_HSICmd(FunctionalState NewState) { /* Check the parameters * ...

  2. Flask系列(四)Flask实现简单页面登陆

    from flask import Flask,render_template,request,redirect,session app = Flask(__name__,template_folde ...

  3. 前端错误提示whitelabel error page

    1:错误提示whitelabel error page:需要定义一个error.html  ,否则提示如图

  4. Django REST framework 之JWT认证

    Json Web Token 1.JWT简介 JWT 是一个开放标准(RFC 7519),它定义了一种用于简洁,自包含的用于通信双方之间以 JSON 对象的形式安全传递信息的方法.JWT 可以使用 H ...

  5. Spring Boot+CXF搭建WebService

    Spring Boot WebService开发 需要依赖Maven的Pom清单 <?xml version="1.0" encoding="UTF-8" ...

  6. stringbuffer 和 stringbuilder区别

    stringbuffer  和  stringbuilder速度                 小于         线程安全           线程非安全 单线程操作大量数据用stringbui ...

  7. java猫和猫的名字

    这篇文章之所以叫猫和猫的名字,是因为是以猫为案例来讲的 主要的内容就是java构造函数和参数的传递 class Animal { public static String name; Animal(S ...

  8. C++中的常量定义

    本篇笔记总结自一次代码检视. 一般来说,使用C语言编程时我们都习惯在代码当中使用C当中的宏定义来定义一个数值常量: #define MY_CONST 7 在C++开发项目时,也会经常存在沿袭C当中常量 ...

  9. 1 :2 Strust2—Demo

    =============================================================== Demo基础包:

  10. VS2010/MFC编程入门之二十二(常用控件:按钮控件Button、Radio Button和Check Box)

    言归正传,鸡啄米上一节中讲了编辑框的用法,本节继续讲解常用控件--按钮控件的使用. 按钮控件简介 按钮控件包括命令按钮(Button).单选按钮(Radio Button)和复选框(Check Box ...