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)的更多相关文章

  1. vue日常学习

    1.$refs可以用来进行父子级间通信.ref被用于作为子组件的索引ID,用以方便的在js中直接访问子组件.用法如下parent.$refs.idname 使用方法: 在父级元素上加上ref属性 &l ...

  2. vue入门学习(基础篇)

    vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...

  3. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  4. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  5. vue.js学习资料

    vue.js学习VuejsAPI教程 https://vuejs.org.cn/guide/Vuejs自己的构建工具 http://www.jianshu.com/p/f8e21d87a572如何用v ...

  6. 在进行vue的学习,项目中需要引入bootstrap、jquery的步骤。

    在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...

  7. Vue.js学习笔记:在元素 和 template 中使用 v-if 指令

    f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

  8. vue.js学习之better-scroll封装的轮播图初始化失败

    vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...

  9. vue.js学习之 跨域请求代理与axios传参

    vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...

随机推荐

  1. 蓝牙 BLE 三种 UUID 格式转换

    蓝牙广播中对服务 UUID 格式定义都有三种 16 bit UUID.32 bit UUID.128 bit UUID. 但是熟悉安卓开发的小伙伴都知道接口都 UUID 格式,fromString 时 ...

  2. Keil MDK fromelf生成bin文件

    找到Keil安装目录中fromelf.exe 配置Keil fromelf.exe --bin -o -\OBJ\LED.bin -\OBJ\LED.axf –bin:二进制文件 –i32:Intel ...

  3. 什么是SAP Graph

    今年九月份刚刚过去的SAP TechEd Las Vegas会议上,SAP CTO Juergen Mueller向外界宣布了SAP一些持续进行的技术创新和改进,其中之一就是SAP Graph,大家可 ...

  4. .NET CORE 技术债

    技术债:OCELOT 网关/熔断/降级/限流CONSUL 服务注册/发现CAP 分布式事件总线SKYWALKING 微服务监控

  5. IAR为STM32创建工程模板(基于STM32f103zet6)

    今天给小伙伴分享一篇给stm32新建工程模版 1.首先打开IAR,就是这个样子 2.再建一个目录文件夹 3.建立一个工作空间,以及建好工作空间如右图所示 4.接下来建立工程,Project------ ...

  6. jvm整理

    我 2.JVM内存区域 p{ text-align: center; font-size: 12px; margin: 4px 0 0 0; } .nav-thumb >div{ positio ...

  7. 如何设置CentOS 7获取动态IP和静态IP

    自动获取动态IP地址 1.输入“ip addr”并按回车键确定,发现无法获取IP(CentOS 7默认没有ifconfig命令),记录下网卡名称(本例中为ens33). 2.输入“cd /etc/sy ...

  8. Integer Inquiry UVA-424(大整数)

    题意分析: 将字符串倒着存入int数组中,每次加完后再取余除去大于10的部分 关键:倒着存入,这样会明显缩短代码量. #include<iostream> #include<cstd ...

  9. 使用SikuliX定位Object(flash)元素

    先说一下背景,这个是我们测试的系统上的一个上传文件的地方,但是用传统的selenium方法很难定位的到.具体的样子是下面这样的. 使用id等属性定位做点击操作好像不能直接操作.无奈之下,只好从网上找找 ...

  10. java基础(10)---stream流

    一.stream的应用场景 for遍历的冗余场景:  stream的写法: 二.获取Stream流的常用方式 三.Stream的map映射方法 更简单的写法: 四.Stream的filter过滤方法 ...