Vue 组件&组件之间的通信 之 使用slot分发内容
slot详细介绍网址:https://cn.vuejs.org/v2/api/#slot
有时候我们需要在自定义组件内书写一些内容,例如: <com-a> <h1>title</h1> </com-a> 如果想获取上面代码片段中h1标签的内容该怎么办呢?
Vue提供了一个极为方便的内置组件<slot>;
初始界面:
初始demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 使用slot分发内容</title>
</head>
<body>
<div> <my-component-a></my-component-a>
</div>
</body>
<template id="template-a">
<div>
<h1>my-component-a</h1> <hr />
</div>
</template> <script type="text/javascript" src="../js/vue.js" ></script>
<script>
let comA = {
template : "#template-a" } new Vue({
data:{ },
components : {
"my-component-a" : comA } }).$mount('div');
</script>
</html>
slot放在那里,获取到的内容就放在那里:
可以根据其name属性进行排其位置:
定义属性name的demo
<div> <my-component-a> <h1 slot='title'>大标题</h1>
<ol slot='olli'>
<li>a</li>
<li>b</li>
<li>c</li> </ol>
<a href="#" slot='res'>点我</a>
</my-component-a>
</div>
</body>
<template id="template-a">
<div>
<slot name='title'></slot>
<h1>my-component-a</h1>
<slot name='olli'></slot>
<slot name='res'></slot> <hr />
</div>
</template>
使用slot分发内容总的demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 使用slot分发内容</title>
</head>
<body>
<div> <my-component-a> <h1 slot='title'>大标题</h1>
<ol slot='olli'>
<li>a</li>
<li>b</li>
<li>c</li> </ol>
<a href="#" slot='res'>点我</a>
</my-component-a>
</div>
</body>
<template id="template-a">
<div>
<slot name='title'></slot>
<h1>my-component-a</h1>
<slot name='olli'></slot>
<slot name='res'></slot> <hr />
</div>
</template> <script type="text/javascript" src="../js/vue.js" ></script>
<script>
let comA = {
template : "#template-a" } new Vue({
data:{ },
components : {
"my-component-a" : comA } }).$mount('div');
</script>
</html>
使用slot分发内容总demo
Vue 组件&组件之间的通信 之 使用slot分发内容的更多相关文章
- vue组件详解(四)——使用slot分发内容
一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer>& ...
- Vue:实践学习笔记(6)——使用SLOT分发内容
Vue:实践学习笔记(6)——使用SLOT分发内容 Slot Slot是什么 Slot是父子组件的通讯方式,可以将父组件的内容显示到子组件之中. 使用SLOT前 比如我在定义组件的时候,在里面输入了X ...
- Vue组件之props,$emit与$on以及slot分发
组件实例之间的作用域是孤立存在,要让它们之间的信息互通,就必须采用组件的通信方式 props用于父组件向子组件传达信息 1.静态方式 eg: <body> <div id=&quo ...
- vue组件详解——使用slot分发内容
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app& ...
- vue 使用Slot 分发内容 学习总结。
https://cn.vuejs.org/v2/guide/components.html#使用-Slot-分发内容 官方API地址 我对solt的理解是当组件中某一项需要单独定义,那么就应该使 ...
- Vue.js-----轻量高效的MVVM框架(十一、使用slot分发内容)
#单个slot html: <h3>#单个slot</h3> <!-- 定义child01模板 --> <template id="child01& ...
- vue 外卖app(3) 利用slot分发内容
1. 增加一个HeaderTop.vue <template> <header class="header"> <slot name="le ...
- vue组件父子之间相互通信案例
- 简述在Vue脚手架中,组件以及父子组件(非父子组件)之间的传值
1.组件的定义 组成: template:包裹HTML模板片段(反映了数据与最终呈现给用户视图之间的映射关系) 只支持单个template标签: 支持lang配置多种模板语法: script:配置Vu ...
随机推荐
- 我了解到的新知识之----如何使用Python获取最新外汇汇率信息
这个需求本来是来源于公司同事工作中需求,用户需要使用数据分析工具Power BI抓取多页的中国银行官网上当天的外汇数据.但是没能研究出来. 我就开始在网络上找关于使用python来抓取当天汇率的案例分 ...
- spring mvc 总结
依赖包 <!-- spring依赖 --> <dependency> <groupId>org.springframework</groupId> &l ...
- Apache Arrow
https://www.kdnuggets.com/2017/02/apache-arrow-parquet-columnar-data.html https://arrow.apache.org/ ...
- 《PHP内核剖析 - 变量/内存管理》
本文总结自: <PHP7 内核剖析 - 变量的内部实现> 一:变量的实现 - 变量是一个语言实现的基础. - 在PHP中,变量的组成部分为 变量名(zval) 变量值(zend_value ...
- HtmlFilter实现Html标签转义过滤器
HtmlUrlFilter: import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterC ...
- git使用:本地项目推送到gitlab
背景:目前公司用gitlab管理我们的项目,经常遇到的问题是,我会在其他已有项目上直接进行修改,然后用于新项目的自动化测试,但是本地推送到gitlab的时候每次都要重新查询一遍怎么操作,特意写下这篇文 ...
- vscode编译发布exe
命令1: dotnet build -r win-x64 命令2: dotnet publish -c Release -r win-x64 -r|--runtime:(window rid或者lin ...
- 2019春第八周作业Compile Summarize
这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 在这里 我在这个课程的目标是 能更加进一步的够熟练掌握指针的用法 这个作业在那个具体方面帮助我实现目标 指针对于高阶题目的做法 参考文献与 ...
- selenium常用操作
1.访问页面获得源码 browser.get(url) browser.page_source 2.查找单个元素:返回一个标签 find_element_by_id ==>id选择器 find ...
- selenium--控制浏览器和简单元素操作
控制浏览器1.driver.maximize_window() #浏览器最大化2.driver.set_windows_size(480*800) #浏览器设置成移动端大小(480*800),参数数字 ...