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. 将ftp目录映射为本地盘符

    1.ftpuser 下载安装FTPUSE下载地址:http://www.ferrobackup.com/ftpuse/ 创建  FTPUSE F: www.xx.com pwd  /USER:admi ...

  2. 11.15java实习生面试总结

    坐了两个小时的车,到了面试地点面了十五分钟左右就结束了,心里有一点难受,不过这也是刚开始,后面的路还长着呢,所以先把面试官问的题目记录下来. 1.C语言能否跨平台? 虽然我面的是java实习生,但是因 ...

  3. UML系列——OO Unit4分析和学期总结

    一.本单元的架构设计 1.类图 第一次 第二次 2.关键方法和架构简述 总体而言是读取图的时候就完成大部分计算(完成缓存),调用查询方法时只是展示计算的结果,少部分直接计算.主要是设计了各种自己定义的 ...

  4. GIt三剑客

    一. Github 什么是Github? github是一个基于git的代码托管平台,付费用户可以建私人仓库,我们一般的免费用户只能使用公共仓库,也就是代码要公开. Github 由Chris Wan ...

  5. Html form表单大全(一)

    在前后端交互的过程中,除了ajax请求之外,最常见的就是表单请求了. 由于form表单属性多,表单标签内容多且复杂,不深究的话很难全面的弄明白. 接下来就来详细的说一说整个form表单都有些什么,并且 ...

  6. vue中v-if和v-for指令最好不要同时使用

    建议不要在与v-for相同的元素上使用v-if.因为v-for指令的优先级高于v-if当它们处于同一节点.v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for  ...

  7. p2.BTC-数据结构

    hash pointers:哈希指针,除了保存值的地址,还要存这整个区块的内容的hash值.这样就既能访问到值,还能确定访问的值有没有被篡改. 一 Blockchain Block chain is ...

  8. Android笔记(六十五) android中的动画——属性动画(propertyanimation)

    补间动画只能定义起始和结束两个帧在“透明度”.“旋转”.“倾斜”.“位移”4个方面的变化,逐帧动画也只能是播放多个图片,无法满足我们日常复杂的动画需求,所以谷歌在3.0开始,推出了属性动画(prope ...

  9. Matlab Cordic 一个数开方代码,适用FPGA

    function [sqrt_value] = calsqrt(a)NormKn = ceil(log2(a)) - 1;fprintf("Normalization input data ...

  10. 使用virtualbox安装unbuntu开启共享文件夹时遇到的权限问题

    在安装完虚拟机之后,开启文件夹共享,发现只能用root进行访问,个人帐号无权限: cust@hqjia-desktop:/media$ ll drwxr-xr-x 4 root root 4096 2 ...