Vue:实践学习笔记(6)——使用SLOT分发内容

Slot

Slot是什么

　　Slot是父子组件的通讯方式，可以将父组件的内容显示到子组件之中。

使用SLOT前

　　比如我在定义组件的时候，在里面输入了XXXXX，在渲染后页面并不会显示，那是因为模板内的内容替换掉了原有的。

　　

使用SLOT后

　　如果我们不想被自动替换掉父组件的内容，那么可以引入插槽，那么父组件的内容会自动加载到插槽中。

　　

多个命名SLOT

　　在子组件中通过为多个SLOT命名，来接受父组件的不同的内容的数据。

　　

Slot用法

在子组件内使用特殊SLOT元素就可以为这个子组件开启一个Slot插槽，在父组件模板内，插入在子组件标签内的所有内容将替代子组件SLOT标签及它的内容。

　　

Vue:实践学习笔记(6)——使用SLOT分发内容的更多相关文章

  1. vue组件详解——使用slot分发内容

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code     一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app& ...

  2. vue 外卖app(3) 利用slot分发内容

    1. 增加一个HeaderTop.vue <template> <header class="header"> <slot name="le ...

  3. Vue 组件&组件之间的通信 之 使用slot分发内容

    slot详细介绍网址:https://cn.vuejs.org/v2/api/#slot 有时候我们需要在自定义组件内书写一些内容,例如: <com-a> <h1>title& ...

  4. Vue:实践学习笔记(3)——组件使用

    Vue:实践学习笔记(3)——组件使用 全局注册 1.注册组件 Vue.component('my-component',{ //选项 }) 说明:my-component就是注册的组件自定义的标签名 ...

  5. Vue:实践学习笔记(1)——快速使用

    Vue:实践学习笔记(1)——快速使用 Vue基础知识 0.引入Vue 官方地址:Vue的官方下载地址 Vue推荐博客:keepfool 在你的程序中快速引入Vue: <!-- 开发环境版本,包 ...

  6. Vue:实践学习笔记(5)——Vue-Cli脚手架的使用

    Vue:实践学习笔记(5)——Vue-Cli脚手架的使用 快速开始 项目配置 可视化配置 vue ui 命令配置 vue init webpack vue-demo(项目名) 运行测试 进入vue-d ...

  7. vue组件详解（四）——使用slot分发内容

    一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer>& ...

  8. vue 使用Slot 分发内容 学习总结。

    https://cn.vuejs.org/v2/guide/components.html#使用-Slot-分发内容    官方API地址 我对solt的理解是当组件中某一项需要单独定义,那么就应该使 ...

  9. Vue.js-----轻量高效的MVVM框架（十一、使用slot分发内容）

    #单个slot html: <h3>#单个slot</h3> <!-- 定义child01模板 --> <template id="child01& ...

随机推荐

  1. Oracle Forms Project For Students Free Download

    After getting to much requests for a free Oracle Forms and Reports project for students, I am sharin ...

  2. ubuntu下C/C++编程起步

    1. 安装VMware虚拟机软件 2. 在VMware中安装linux系统,这里安装的是Ubuntu.(用 VMware 安装 Ubuntu 12.04详细过程图解) 3. ubuntu有自带文本编辑 ...

  3. 第十二题 Merge Sorted Array

    Given two sorted integer arrays A and B, merge B into A as one sorted array. Note: You may assume th ...

  4. dubbo应用程序的单元测试环境搭建(springtest,powermock,mockito)

    转:http://blog.csdn.net/yys79/article/details/66472797 最近,项目中频繁用到dubbo,而且java工程用引用了几十个关联系统的服务(如用户认证,基 ...

  5. 96Boards扩展板 STM32 B96B-F446VE 牛刀小试

    前言 原创文章,转载引用务必注明链接,水平有限,如有疏漏,欢迎指正. 本文使用Markdown写成,为获得更好的阅读体验和正常的链接.图片显示,请访问我的博客原文: http://www.cnblog ...

  6. 关于使用Axure RP进行原型开发的一些心得体会

    Axure RP(Axure Rapid Prototyping)是一款高速实现.准确表达.带有交互效果且易于上手的原型设计工具. 本人在曾參与某系统需求分析时開始接触Axure RP,初步掌握了一定 ...

  7. Vue2.0 :key作用

    转自:https://www.cnblogs.com/zhumingzhenhao/p/7688336.html 为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需 ...

  8. vue中使用key管理可复用的元素

    1.概述 Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染. key解决上述问题之外的情景:这两个元素是完全独立的,不要复用它们. 2.示例 <!DOCTYPE html&g ...

  9. UNP学习笔记（第三十章 客户/服务器程序设计范式）

    TCP测试用客户程序 #include "unp.h" #define MAXN 16384 /* max # bytes to request from server */ in ...

  10. HDU 1006 Tick and Tick 解不等式解法

    一開始思考的时候认为好难的题目,由于感觉非常多情况.不知道从何入手. 想通了就不难了. 能够转化为一个利用速度建立不等式.然后解不等式的问题. 建立速度,路程,时间的模型例如以下: /******** ...