使用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 ...
随机推荐
- Codeforces827D. Best Edge Weight
$n \leq 2e5,m \leq 2e5$的有边权图,对每条边问:不改其他边的情况下这条边最多能是多少使得他一定在所有最小生成树上,如果无穷大输出-1. 典型题+耗时题,CF上的绝望时刻..打VP ...
- GDKOI2018游记
D0 开开心心去酒店,在Vanda,资磁,然而和其他人住的比较远,不资磁. 开开心心打开玩具熊,吓尿了..第四部贼难. 晚上看了看网络流,1点才睡.3点多好像梦到玩具熊被吓醒,4点继续睡,6点起. D ...
- solr请求处理器列表
List of Request Handlers Available The Javadocs contain a complete list of Request Handlers. Many of ...
- Sigar 编译笔记
https://blog.csdn.net/zw3413/article/details/79482438
- Wooden Sticks---hdu1051(最长上升子序列)
http://acm.hdu.edu.cn/showproblem.php?pid=1051 Problem Description There is a pile of n wooden stick ...
- uva 10604
状态压缩 奇怪的是A与B混合 和 B与A 混合得到的热量可能不同 #include <cstdio> #include <cstdlib> #include <cmat ...
- 如何使用eclipse for c/c++ 配置环境编写第一个C程序
因为VS太大还要安装太多的插件,,,所以想用eclipse编写C语言... 1.下载eclipse for c/c++版本 去官网即可下载 https://www.eclipse.org/dow ...
- maven之基础
一.配置maven的环境 下载地址:http://maven.apache.org/download.cgi(window下载(Binary zip)的) 将maven解压,然后配置环境变量打开: 计 ...
- maven pom.xml文件介绍
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- vmware下centos6.7网络配置
使用NAT方式: 查看/etc/sysconfig/network-script/ 下面没有ifcfg-eth0 新建ifcfg-eth0,内容如下 DEVICE=eth0 BOOTPROTO=dhc ...