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. 【洛谷 P2226】 [HNOI2001]遥控赛车比赛(最短路)

    题目链接 首先拆点,把每个点拆成4个点,表示到达这个点的时候赛车的朝向. 然后考虑连边. 相邻同向并且都是可以走的点直接连边权1的边. 至于怎么转向,只需在每个点\(i\)向每个方向一直拓展直到不能走 ...

  2. OO第三单元(地铁,JML)单元总结

    OO第三单元(地铁,JML)单元总结 这是我们OO课程的第二个单元,这个单元的主要目的是让我们熟悉并了解JML来是我们具有规格化编程架构的思想.这个单元的主题一开始并不明了,从第一次作业的路径到第二次 ...

  3. OC与swift相互调用

    一.OC调用swift文件 二.swift调用OC文件 三.注意和总结 添加: 四.自定义桥接文件 一.OC调用swift文件 在OC项目中创建一个swift文件的时候,Xcode 会提示 需要创建一 ...

  4. MonoSymbolFileException in CheckLineNumberTable

    Mono.CompilerServices.SymbolWriter.MonoSymbolFileException: Exception of type 'Mono.CompilerServices ...

  5. Manjaro 安装笔记

    双系统基本知识 [折腾日记]win10 ,ubuntu双系统安装避坑指南 Windows 下安装 Ubuntu 双系统(更新) rEFInd 总结注意点: 制作U盘启动盘一开始使用的是 Ulrstro ...

  6. 1+x学习日志——js获取随机颜色的几种实现方式

    因为学习时间比较紧,所以也没多少时间发博客了.后续会慢慢补齐的,下面是代码 /// function randomColor(){ var r = parseInt(Math.random() * 2 ...

  7. 如何恢复SVN被删除文件、文件夹

    转自:https://blog.csdn.net/chuangxin/article/details/81226657 一.摘要本文讲述在客户端(如:Tortoise SVN,开发工具IDE SVN插 ...

  8. MySql时区修改

    1.查看当前时间 > select curtime(); #或select now()也可以+-----------+| curtime() |+-----------+| 15:18:10 | ...

  9. java加密算法-DES

    public class DESUtil { private static String strdefaultkey = "13456789abcd";//默认的key priva ...

  10. 介绍一个二次排序的小技巧(best coder27期1001jump jump jump)

    先来描述一下问题: 问题描述 有n小孩在比赛跳远,看谁跳的最远.每个小孩可以跳3次,这个小孩的成绩就是三次距离里面的最大值.例如,一个小孩跳3次的距离分别时10, 30和20,那么这个小孩的成绩就是3 ...