除非子组件模板包含至少一个<slot>插口,否则父组件的内容将会别丢弃。当子组件模板只有一个没有属性的slot时,父组件整个内容片断将插入到slot所在的DOM位置,并替换掉slot标签本身。

最初在 <slot> 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容。

作用域插槽是一种特殊类型的插槽,用作使用一个(能够传递数据到)可重用模板替换已渲染元素。

在子组件中,只需将数据传递到插槽,就像你将 prop 传递给组件一样:

在父级中,具有特殊属性scope的<template>元素,表示它是作用域插槽的模板,scope的值对应一个临时变量名,此变量接受从子组件传递的prop对象

demo:

var app=new Vue({

  el:'#app',

  components:{      

    'scope-component2':{
        template:'<div><p>this is a child</p><slot text="this info from child"></slot></div>'     }   }
});

html

<scope-component2>
<template scope="props">
<p>{{props.text}}</p>
</template>
</scope-component2>

使用slot分发内容 作用域插槽的更多相关文章

  1. Vue:实践学习笔记(6)——使用SLOT分发内容

    Vue:实践学习笔记(6)——使用SLOT分发内容 Slot Slot是什么 Slot是父子组件的通讯方式,可以将父组件的内容显示到子组件之中. 使用SLOT前 比如我在定义组件的时候,在里面输入了X ...

  2. Vue 组件&组件之间的通信 之 使用slot分发内容

    slot详细介绍网址:https://cn.vuejs.org/v2/api/#slot 有时候我们需要在自定义组件内书写一些内容,例如: <com-a> <h1>title& ...

  3. vue组件详解(四)——使用slot分发内容

    一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer>& ...

  4. vue组件详解——使用slot分发内容

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code     一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app& ...

  5. vue 使用Slot 分发内容 学习总结。

    https://cn.vuejs.org/v2/guide/components.html#使用-Slot-分发内容    官方API地址 我对solt的理解是当组件中某一项需要单独定义,那么就应该使 ...

  6. 使用slot分发内容

    为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件的模板.这个过程被称为 内容分发 使用特殊的<slot>元素作为原始内容的插槽 除非子组件模板包含至少一个<slot&g ...

  7. Vue.js-----轻量高效的MVVM框架(十一、使用slot分发内容)

    #单个slot html: <h3>#单个slot</h3> <!-- 定义child01模板 --> <template id="child01& ...

  8. vue2.X slot 分发内容

    1.概述: 简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示.不显示.在哪个地方显示.如何显示,就是slot分发负责的活. 2.默认情况下 父组件在子组件内套的内容,是不显示的. ...

  9. vue 外卖app(3) 利用slot分发内容

    1. 增加一个HeaderTop.vue <template> <header class="header"> <slot name="le ...

随机推荐

  1. 【2018 Multi-University Training Contest 2】

    01: 02: 03: 04:https://www.cnblogs.com/myx12345/p/9394511.html 05: 06: 07:https://www.cnblogs.com/my ...

  2. msp430项目编程10

    msp430中项目---电子密码锁 1.扫描键盘工作原理 2.电路原理说明 3.代码(显示部分) 4.代码(功能实现) 5.项目总结 msp430项目编程 msp430入门学习

  3. 获取鼠标位置的几个通用的JS函数

    原文:http://www.open-open.com/code/view/1421401009218 /*两个通用函数,用于获取鼠标相对于整个页面的当前位置*/ function getX(e) { ...

  4. Win7查看本地是否安装JDK及安装路径的方法

    工具/原料   win7 方法/步骤   1 开始->点击运行,输入:cmd 2 然后在命令提示符中,输入:java -version  假如看到有版本提示那么安装成功 3 假如忘记了java ...

  5. 利用NSA的MS17-010漏洞利用工具实现Win 7和Win Server 2008系统入侵

    影子经纪人(Shadow Brokers)最近陆续曝光的NSA网络武器令人震惊,尽管这些工具是否出自国家级别黑客团队之手尚不清楚,但至少存在一个可以说明问题的事实:这些漏洞利用工具都能有效运行,且具有 ...

  6. Null value was assigned to a property of primitive type setter of原因及解决

    出现Null value was assigned to a property of primitive type setter of错误是由于类型不匹配,将字段的属性由hibernate的int类型 ...

  7. 【转载】TCP,IP,HTTP,SOCKET区别和联系

    网络由下往上分为:        对应 物理层-- 数据链路层-- 网络层--                       IP协议 传输层--                       TCP协议 ...

  8. 一个很小的C++写的MVC的例子

    #include<iostream> #include<vector> //get namespace related stuff using std::cin; using ...

  9. ps -ef | grep

    ps -ef | grep java   查看所有关于java的进程 root     17540     1  0  2009 ?        01:42:27 /usr/java/jdk1.5. ...

  10. 在Orchard CMS Theme 用代码定义布局Widgets

    因为公司业务需要,经过本人几个月尝试,使用Orchard CMS 开发一个简单的企业门户(地址是http://www.ubof.cn).在刚开始接触Orchard CMS,对于个性化的网页布局不知道怎 ...