vue日常学习(2)
1.组件学习之内容分发
1.1 作用域插槽
父级
<div class="parent">
<child>
<template scope="props">
<span>hello from parent</span><br/>
<span>{{ props.text }}</span><br/>
<span>{{ props.text2 }}</span><br/>
<span>{{ props.text3 }}</span>
</template>
</child>
</div>
子级模板
<div class="child">
<span>first hello</span>
<slot text="hello from child" text2="hello again"></slot>
<slot text3='hello!!!!'></slot>
</div>
其中child组件首先会调用模板,然后在使用child组件时标签内的template部分将会被渲染到子组件child的slot标签中。
scope
的值对应一个临时变量名(保存的是对象),此变量接收从子组件中传递的 prop 对象,每个slot会产出一个prop对象,在这里就分别是{text:'hello from child',text2:'hello again'}和{text3:'hello!!!!'},每个slot都会用template渲染一次,最终完成渲染。
注:对于组件将要分发的内容,如果没有指定slot名字(不是具名slot),那么分发的内容将会在子组件中的每个slot中都进行渲染。
输出结果是
first hello
here is parent
hello from child
hello again
here is parent hello!!!!
vue日常学习(2)的更多相关文章
- vue日常学习
1.$refs可以用来进行父子级间通信.ref被用于作为子组件的索引ID,用以方便的在js中直接访问子组件.用法如下parent.$refs.idname 使用方法: 在父级元素上加上ref属性 &l ...
- vue入门学习(基础篇)
vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...
- Vue.js学习笔记(2)vue-router
vue中vue-router的使用:
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- vue.js学习资料
vue.js学习VuejsAPI教程 https://vuejs.org.cn/guide/Vuejs自己的构建工具 http://www.jianshu.com/p/f8e21d87a572如何用v ...
- 在进行vue的学习,项目中需要引入bootstrap、jquery的步骤。
在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...
- Vue.js学习笔记:在元素 和 template 中使用 v-if 指令
f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...
- vue.js学习之better-scroll封装的轮播图初始化失败
vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...
- vue.js学习之 跨域请求代理与axios传参
vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...
随机推荐
- 蓝牙 BLE 三种 UUID 格式转换
蓝牙广播中对服务 UUID 格式定义都有三种 16 bit UUID.32 bit UUID.128 bit UUID. 但是熟悉安卓开发的小伙伴都知道接口都 UUID 格式,fromString 时 ...
- Keil MDK fromelf生成bin文件
找到Keil安装目录中fromelf.exe 配置Keil fromelf.exe --bin -o -\OBJ\LED.bin -\OBJ\LED.axf –bin:二进制文件 –i32:Intel ...
- 什么是SAP Graph
今年九月份刚刚过去的SAP TechEd Las Vegas会议上,SAP CTO Juergen Mueller向外界宣布了SAP一些持续进行的技术创新和改进,其中之一就是SAP Graph,大家可 ...
- .NET CORE 技术债
技术债:OCELOT 网关/熔断/降级/限流CONSUL 服务注册/发现CAP 分布式事件总线SKYWALKING 微服务监控
- IAR为STM32创建工程模板(基于STM32f103zet6)
今天给小伙伴分享一篇给stm32新建工程模版 1.首先打开IAR,就是这个样子 2.再建一个目录文件夹 3.建立一个工作空间,以及建好工作空间如右图所示 4.接下来建立工程,Project------ ...
- jvm整理
我 2.JVM内存区域 p{ text-align: center; font-size: 12px; margin: 4px 0 0 0; } .nav-thumb >div{ positio ...
- 如何设置CentOS 7获取动态IP和静态IP
自动获取动态IP地址 1.输入“ip addr”并按回车键确定,发现无法获取IP(CentOS 7默认没有ifconfig命令),记录下网卡名称(本例中为ens33). 2.输入“cd /etc/sy ...
- Integer Inquiry UVA-424(大整数)
题意分析: 将字符串倒着存入int数组中,每次加完后再取余除去大于10的部分 关键:倒着存入,这样会明显缩短代码量. #include<iostream> #include<cstd ...
- 使用SikuliX定位Object(flash)元素
先说一下背景,这个是我们测试的系统上的一个上传文件的地方,但是用传统的selenium方法很难定位的到.具体的样子是下面这样的. 使用id等属性定位做点击操作好像不能直接操作.无奈之下,只好从网上找找 ...
- java基础(10)---stream流
一.stream的应用场景 for遍历的冗余场景: stream的写法: 二.获取Stream流的常用方式 三.Stream的map映射方法 更简单的写法: 四.Stream的filter过滤方法 ...