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. phpexcel设置所有单元格的默认对齐方式

    代码如下,从国外论坛上找到的 $objPHPExcel->getDefaultStyle()->getAlignment()->setHorizontal(PHPExcel_Styl ...

  2. mac 安装 redis

    安装命令 brew install redis 开机启动redis命令 $ ln -sfv /usr/local/opt/redis/*.plist ~/Library/LaunchAgents 使用 ...

  3. Openfire 4.1.2 DOWNLOADS

    DOWNLOADS  Source Code Openfire 4.1.2 http://www.igniterealtime.org/downloads/ http://download.ignit ...

  4. WIN SERVER8更改MYSQL的datadir后，数据库启动不起来

    曾经一直都没注意的问题.这次就记录下来吧.假设有相同问题的也当做一个提示 WIN SERVER8更改MYSQL的datadir后,数据库启动不起来,详细原因有二. 首先.先来看一下怎样更改 datad ...

  5. Kali Linux 1.0 新手折腾笔记（2013.3.21更新）

    rootoorotor昨天折腾了 Kali Linux 1.0,把大概的配置过程记录下来,希望对想接触或使用Kali Linux的同学有所帮助. 请注意: 1.本文为面向新手的教程,没技术含量,没事瞎 ...

  6. 分层架构web容器的配置安全

    转自:http://hi.baidu.com/shineo__o/item/7520d54c24d234c71081da82 /ps:本以为这是一个偶然配置失误造成的问题,但最近几天无聊时测试发现,有 ...

  7. CSRF Token

    本文参考自:https://blog.csdn.net/lion19930924/article/details/50955000 目的是防御CSRF攻击. Token就是令牌,最大的特点就是随机性, ...

  8. Hibernate4.3.6 Final+Spring3.0.5配置出错提示及解决方法

    1. Caused by: org.hibernate.cache.NoCacheRegionFactoryAvailableException: Second-level cache is used ...

  9. java jar包运行方法

    http://java-beginner-liyun.iteye.com/blog/736752一.怎么打jar包 第一步:选中要打jar包的工程 第二步:鼠标右击,选择Export... 第三步:选 ...

  10. 菜鸟运维笔记：配置Apache二级域名及WWW訪问

    事实上www訪问也能够理解为二级域名的一种. 域名 比方.com..org..edu..gov..info..net等等都是一级域名,或称顶级域名. 其详细格式是 *.顶级域名,比方csdn.net. ...