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. 【ActiveMQ】1.下载安装启动使用

    官网下载:http://activemq.apache.org/activemq-5121-release.html 官网指导文档:http://activemq.apache.org/version ...

  2. android windowSoftInputMode属性详解(转)

    activity主窗口与软键盘的交互模式,可以用来避免输入法面板遮挡问题,Android1.5后的一个新特性. 这个属性能影响两件事情: [一]当有焦点产生时,软键盘是隐藏还是显示 [二]是否减少活动 ...

  3. PHP 5.4 中经 htmlspecialchars 转义后的中文字符串为空的问题

    PHP 5.4.3 环境中测试了一个在 PHP 5.2 环境下运行正常的程序,却发现本应正常提交一个中文字符串到数据库的代码却提交了一个空字符串,经过排查,该字符串在经 htmlspecialchar ...

  4. （原创）linux安装xgboost快速高效方法

    1.先安装git ubuntu:   apt-get install git centos:    yum install git 2.下载xgboost仓库,注意有--recursive(有子模块哦 ...

  5. Js删除Table中的一行

    <html> <head> <title></title> <script type="text/javascript"> ...

  6. perl的几个小tips

    1.字符串比较 if($str eq "hello"){ ... } 字符串比较必须用eq,用==只适合标量 2.字符串连接 $str3=$str1."-".$ ...

  7. vuex 深入理解

    参考自:https://mp.weixin.qq.com/s?src=11&timestamp=1528275978&ver=922&signature=ZeHPZ2ZrLir ...

  8. js函数的Json写法

    https://zhidao.baidu.com/question/83401454.html

  9. 解决：cannot execute binary file

    linux系统下遇到cannot execute binary file的问题,一般由以下情况造成: 非root用户或者无执行权限 编译环境不同(程序由其他操作环境复制过来) 对于第一种情况,采用增加 ...

  10. INSTALL_FAILED_UID_CHANGED解决的方法

    近期开发过程中又遇到了这个问题,最终找到了一个比較好的解决的方法.在此记录下. 打开手机或者pad中的设置----->安全----->未知来源(同意安装非安卓市场应用程序). 把这个取消, ...