Vue_(组件通讯)使用solt分发内容
Vue特殊特性slot 传送门
有时候我们需要在自定义组件内书写一些内容，例如：
<com-a>
<h1>title</h1>
</com-a>
如果想获取上面代码片段中h1标签的内容该怎么办呢？Vue提供了一个极为方便的内置组件<slot>
Learn
一、使用solt分发内容
目录结构
【每个demo下方都存有html源码】
一、使用solt分发内容
在<my-component-a>组件中添加<h1>、<ul>、<a>标签，并在<h1>标签中添加组件<slot="title">、在<ul>标签中添加组件<slot="ul">，在<a>标签中添加组件<solt="a">
<body>
<div id="GaryId">
<my-component-a>
<h1 slot="title">Gary大标题</h1> <ul slot="ulli">
<li>a</li>
<li>b</li>
<li>c</li>
</ul> <a href="#" slot="a">传送门</a>
</my-component-a>
</div>
</body>
可以直接在<template>中设计标签布局顺序
<template id="template-a">
<div> <slot name="title">数据为空</slot>
<h1>my-component-a</h1> <slot name="a">数据为空</slot>
<slot name="ulli">数据为空</slot>
</div>
</template>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
</head>
<body>
<div id="GaryId">
<my-component-a>
<h1 slot="title">Gary大标题</h1> <ul slot="ulli">
<li>a</li>
<li>b</li>
<li>c</li>
</ul> <a href="#" slot="a">传送门</a>
</my-component-a>
</div>
</body> <template id="template-a">
<div> <slot name="a">数据为空</slot> <h1>my-component-a</h1>
<slot name="ulli">数据为空</slot>
<slot name="title">数据为空</slot>
</div>
</template> <script type="text/javascript" src="../js/vue.js" ></script>
<script type="text/javascript"> let comA = {
template : "#template-a"
} new Vue({
data : { },
components : {
"my-component-a" : comA
}
}).$mount("#GaryId"); </script>
</html>
Gary_slot.html
Vue_(组件通讯)使用solt分发内容的更多相关文章
- Vue_(组件通讯)单项数据流
Vue单项数据流 传送门 单向数据流:父组件值的更新,会影响到子组件,反之则不行 修改子组件的值: 局部数据:在子组件中定义新的数据,将父组件传过来的值赋值给新定义的数据,之后操作这个新数据 如果对数 ...
- Vue_(组件通讯)非父子关系组件通信
Vue单项数据流 传送门 Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信 ...
- Vue_(组件通讯)子组件向父组件传值
Vue组件 传送门 子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 1.定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: ...
- Vue_(组件通讯)父组件向子组件传值
Vue组件 传送门 父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 1.定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件 2.准备获取数据:c ...
- Vue_(组件通讯)父子组件简单关系
Vue组件 传送门 在Vue的组件内也可以定义组件,这种关系成为父子组件的关系 如果在一个Vue实例中定义了component-a,然后在component-a中定义了component-b,那他们的 ...
- Vue_(组件通讯)动态组件结合keep-alive
keep-alive 传送门 <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive ...
- Vue_(组件通讯)动态组件
动态组件 传送门 在一个元素上挂载多个组件,根据不同状态进行切换的时候,可以使用动态组件 动态组件的使用:需要使用内置组件<component></component>,根据 ...
- Vue_(组件通讯)组件
Vue组件 传送门 组件Component,可扩展HTML元素,封装可重用的代码.通俗的来说,组件将可重用的HTML元素封装成为标签方便复用: 组件的使用: 使用全局方法Vue.extend创建构造器 ...
- vue组件详解（四）——使用slot分发内容
一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer>& ...
随机推荐
- hdu 1969 pie 卡精度的二分
Pie Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submiss ...
- Where is __dso_handle defined?
Where is __dso_handle defined? 来源 https://stackoverflow.com/questions/34308720/where-is-dso-handle- ...
- 你不知道的css各类布局（二）之流体布局、液体布局、栅格布局
流体布局 什么是流 在谈论流体布局之前我们需要知道一件事情就是何为“流”,所谓“流”就是“文档流”,是css中的一种基本定位和布局 概念 流体布局(Liquid/Fluid Layout)指的是利用元 ...
- （四）创建基于maven的javaFX+springboot项目，用户界面与后台逻辑分离方式
下面来介绍创建maven的javaFX+springboot项目,基于用户界面与后天逻辑分离的方式,用户界面使用fxml文件来常见,类似于jsp,可以引入css文件修饰界面 maven依赖 <d ...
- 海量数据处理 从哈希存储到Bloom Filter(1) (转载)
先解释一下什么是哈希函数.哈希函数简单来说就是一种映射,它可取值的范围(定义域)通常很大,但值域相对较小.哈希函数所作的工作就是将一个很大定义域内的值映射到一个相对较小的值域内. 传统的哈希存储 假设 ...
- 【踩坑经历】SQLSTATE[HY000] [2002] Connection refused
使用docker搭建lnmp环境,使用的是分容器的搭建方案 框架使用thinkphp,想要连接数据MySQL,一直显示"SQLSTATE[HY000] [2002] Connection r ...
- Python之for循环与while循环
for语句格式for x in range(起始值,结束值,步幅) 执行语句输出0,100各个数字for i in range(0,101) print(i)输出0,100的偶数for i in ra ...
- 【异常】Could not find artifact com.wm.****:
1 详细异常 [ERROR] Failed to execute goal on project spark-etl: Could not resolve dependencies for proje ...
- Redis Sentinel机制与用法说明
本文来自 https://www.cnblogs.com/zhoujinyi/p/5569462.html 概述 Redis-Sentinel是Redis官方推荐的高可用性(HA)解决方案,当用Red ...
- Hive动态分区和分桶（八）
Hive动态分区和分桶 1.Hive动态分区 1.hive的动态分区介绍 hive的静态分区需要用户在插入数据的时候必须手动指定hive的分区字段值,但是这样的话会导致用户的操作复杂度提高,而且在 ...