除非子组件模板包含至少一个<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. 洛谷P2527 [SHOI2001]Panda的烦恼

    题目描述 panda是个数学怪人,他非常喜欢研究跟别人相反的事情.最近他正在研究筛法,众所周知,对一个范围内的整数,经过筛法处理以后,剩下的全部都是质数,不过panda对这些不感兴趣,他只对被筛掉 ...

  2. linux下库文件的编程

    编程到了一定的时候,总喜欢追求新的东西.将代码尽量模块化就是我的追求之一,原来只是满足于将代码从单文件中分离,通过头文件和实现文件实现模块化,后来发现最好的方法是打包成库文件,使用更加方便.尽管在li ...

  3. DatePickerDialog

    package com.pingyijinren.helloworld.activity; import android.app.DatePickerDialog; import android.su ...

  4. httpclient自动执行http的302重定向

    今天debug过程中发现,httpclient会自动执行302的重定向,但是这个的前提是第一个请求是get发出的.我测试发现用post的后的302是系统不会自动redirect的..不知道到底正确不, ...

  5. POJ 2135 最小费用最大流 入门题

    Farm Tour Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 19207   Accepted: 7441 Descri ...

  6. HUNAN 11567 Escaping (最大流)

    http://acm.hunnu.edu.cn/online/?action=problem&type=list&courseid=0&querytext=&pagen ...

  7. Spring MVC静态资源实例

    以下内容引用自http://wiki.jikexueyuan.com/project/spring/mvc-framework/spring-static-pages-example.html: 例子 ...

  8. eclipse提速01 - 禁用不常用的eclipse启动插件

    会不断更新,需要的收藏 禁用不常用的eclipse启动插件(当然如果不需要可以卸载)

  9. win7 休眠功能的开启与关闭

    1. 打开控制面板得下面目录,编辑计划设置

  10. 202. Segment Tree Query

    最后更新 二刷 09-Jan-17 正儿八经线段树的应用了. 查找区间内的值. 对于某一个Node,有这样的可能: 1)需要查找区间和当前NODE没有覆盖部分,那么直接回去就行了. 2)有覆盖的部分, ...