使用slot分发内容 作用域插槽
除非子组件模板包含至少一个<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分发内容 作用域插槽的更多相关文章
- Vue:实践学习笔记(6)——使用SLOT分发内容
Vue:实践学习笔记(6)——使用SLOT分发内容 Slot Slot是什么 Slot是父子组件的通讯方式,可以将父组件的内容显示到子组件之中. 使用SLOT前 比如我在定义组件的时候,在里面输入了X ...
- Vue 组件&组件之间的通信 之 使用slot分发内容
slot详细介绍网址:https://cn.vuejs.org/v2/api/#slot 有时候我们需要在自定义组件内书写一些内容,例如: <com-a> <h1>title& ...
- vue组件详解(四)——使用slot分发内容
一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer>& ...
- vue组件详解——使用slot分发内容
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app& ...
- vue 使用Slot 分发内容 学习总结。
https://cn.vuejs.org/v2/guide/components.html#使用-Slot-分发内容 官方API地址 我对solt的理解是当组件中某一项需要单独定义,那么就应该使 ...
- 使用slot分发内容
为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件的模板.这个过程被称为 内容分发 使用特殊的<slot>元素作为原始内容的插槽 除非子组件模板包含至少一个<slot&g ...
- Vue.js-----轻量高效的MVVM框架(十一、使用slot分发内容)
#单个slot html: <h3>#单个slot</h3> <!-- 定义child01模板 --> <template id="child01& ...
- vue2.X slot 分发内容
1.概述: 简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示.不显示.在哪个地方显示.如何显示,就是slot分发负责的活. 2.默认情况下 父组件在子组件内套的内容,是不显示的. ...
- vue 外卖app(3) 利用slot分发内容
1. 增加一个HeaderTop.vue <template> <header class="header"> <slot name="le ...
随机推荐
- 【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 ...
- msp430项目编程10
msp430中项目---电子密码锁 1.扫描键盘工作原理 2.电路原理说明 3.代码(显示部分) 4.代码(功能实现) 5.项目总结 msp430项目编程 msp430入门学习
- 获取鼠标位置的几个通用的JS函数
原文:http://www.open-open.com/code/view/1421401009218 /*两个通用函数,用于获取鼠标相对于整个页面的当前位置*/ function getX(e) { ...
- Win7查看本地是否安装JDK及安装路径的方法
工具/原料 win7 方法/步骤 1 开始->点击运行,输入:cmd 2 然后在命令提示符中,输入:java -version 假如看到有版本提示那么安装成功 3 假如忘记了java ...
- 利用NSA的MS17-010漏洞利用工具实现Win 7和Win Server 2008系统入侵
影子经纪人(Shadow Brokers)最近陆续曝光的NSA网络武器令人震惊,尽管这些工具是否出自国家级别黑客团队之手尚不清楚,但至少存在一个可以说明问题的事实:这些漏洞利用工具都能有效运行,且具有 ...
- 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类型 ...
- 【转载】TCP,IP,HTTP,SOCKET区别和联系
网络由下往上分为: 对应 物理层-- 数据链路层-- 网络层-- IP协议 传输层-- TCP协议 ...
- 一个很小的C++写的MVC的例子
#include<iostream> #include<vector> //get namespace related stuff using std::cin; using ...
- ps -ef | grep
ps -ef | grep java 查看所有关于java的进程 root 17540 1 0 2009 ? 01:42:27 /usr/java/jdk1.5. ...
- 在Orchard CMS Theme 用代码定义布局Widgets
因为公司业务需要,经过本人几个月尝试,使用Orchard CMS 开发一个简单的企业门户(地址是http://www.ubof.cn).在刚开始接触Orchard CMS,对于个性化的网页布局不知道怎 ...