slot--使用插槽分发内容(位置、槽口;作用: 占个位置)

官网API: https://cn.vuejs.org/v2/guide/components.html#使用插槽分发内容

使用组件时,有时子组件不知道会收到什么内容,这是由父组件决定的。

一、单个插槽

1.my-component 组件:
<div>
<h2>我是子组件的标题</h2>
<slot>
只有在没有要分发的内容时才会显示。
</slot>
</div> 2.父组件:
<div>
<h1>我是父组件的标题</h1>
<my-component>
<p>这是一些初始内容</p>
<p>这是更多的初始内容</p>
</my-component>
</div> 3.渲染结果:
<div>
<h1>我是父组件的标题</h1>
<div>
<h2>我是子组件的标题</h2>
<p>这是一些初始内容</p>
<p>这是更多的初始内容</p>
</div>
</div>

二、具名插槽

slot根据不同的name名称分发内容,多个插槽可以有不同的名字。

仍然可以有匿名的默认插槽,为了找不到匹配的内容片段使用,如果没有默认插槽,这些找不到匹配的内容片段将被抛弃。

1.my-component 组件:
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div> 2.父组件: <my-component>
<h1 slot="header">这里可能是一个页面标题</h1>
<p>主要内容的一个段落。</p>
<p>另一个主要段落。</p>
<p slot="footer">这里有一些联系信息</p>
</my-component> 3.渲染结果:
<div class="container">
<header>
<h1>这里可能是一个页面标题</h1>
</header>
<main>
<p>主要内容的一个段落。</p>
<p>另一个主要段落。</p>
</main>
<footer>
<p>这里有一些联系信息</p>
</footer>
</div>

三、作用域插槽

作用域插槽是一种特殊类型的插槽,用作一个 (能被传递数据的) 可重用模板,来代替已经渲染好的元素。

1.子组件:
<div class="child">
<slot text="hello from child"></slot>
</div> 2.父组件: <div class="parent">
<child>
<template slot-scope="props">
<span>hello from parent</span>
<span>{{ props.text }}</span>
</template>
</child>
</div> 3.渲染结果:
<div class="parent">
<div class="child">
<span>hello from parent</span>
<span>hello from child</span>
</div>
</div>

vue组件-使用插槽分发内容(slot)的更多相关文章

  1. Vue组件-使用插槽分发内容

    在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer></app-fo ...

  2. vue使用插槽分发内容slot的用法

    将父组件的内容放到子组件指定的位置叫做内容分发 //在父组件里使用子组件 <son-tmp> <div>我是文字,我需要放到son-tmp组件里面制定的位置</div&g ...

  3. vue2.0使用slot插槽分发内容

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. vue 通过插槽分发内容

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

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

    Vue:实践学习笔记(6)——使用SLOT分发内容 Slot Slot是什么 Slot是父子组件的通讯方式,可以将父组件的内容显示到子组件之中. 使用SLOT前 比如我在定义组件的时候,在里面输入了X ...

  6. vue组件知识总结

    vue组件化开发 将一个页面分割成若干个组件,一个页面js+css+html,将自己类容分割出来,方便开发,更好了维护我们的代码,每个组件封装自己的js+html+css,样式命名冲突 组件分类 页面 ...

  7. Vue组件化和路由

    组件化 组件化是vue的核心思想,它能提高开发效率,方便重复使用,简化调试步骤,提升整个项目的可维护性,便于多人协同开发 组件通信 父组件 => 子组件: 属性props 特性$attrs 引用 ...

  8. 详解Vue中的插槽

    作者: 小土豆 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/2436173500265335 什么是插槽 在日常的项目 ...

  9. vue学习之插槽

    插槽 插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性. 个人理解:我感觉插槽就是父组件控制插槽 ...

随机推荐

  1. 译——meta viewport

    此文翻译PPK大神的——meta viewport. 主要讲到了第三种viewport——ideal viewport,以及使用meta viewport 设置移动浏览器的视口. the meta v ...

  2. POJ 2891 Strange Way to Express Integers excrt/我真傻,真的

    我真傻,真的 我单知道这道题在(b-b1)%d!=0时要判无解,哪成想自己却没有读完这组后面的数据而直接break掉...qwqfk 当 $ x \equiv b_1 (  mod    a_1  ) ...

  3. BZOJ 2973 石头游戏 矩乘加速递推

    FFFFFFF,看了一上午才看懂,又调了一中午.....我终于明白为何自己如此菜了qwq 这个题加速的思路是:因为每个序列的长度小于6,他们的lcm是60,所以六十次以后就会回到原来的序列. 加速的就 ...

  4. 华东交通大学2017年ACM“双基”程序设计竞赛 1003

    Problem Description 有两个球在长度为L的直线跑道上运动,两端为墙.0时刻小球a以1m/s的速度从起点向终点运动,t时刻小球b以相同的速度从终点向起点运动.问T时刻两球的距离.这里小 ...

  5. 每次打开 excel2010 都要配置如何解决

    遇到这种情况有以下几种解决方法 1.修改原有office启动名称 打开"C:/Program Files/Common Files/Microsoft Shared/OFFICE14/Off ...

  6. (转)linux磁盘分区fdisk分区和parted分区

    linux磁盘分区fdisk分区和parted分区 原文:http://www.cnblogs.com/jiu0821/p/5503660.html ~~~~~~~~~~~~~~~~~~~~~~~~~ ...

  7. Unity3D游戏高性能战争迷雾系统实现

    一 效果图 先上效果图吧,这是为了吸引到你们的ヽ(。◕‿◕。)ノ゚ 战争迷雾效果演示图 战争迷雾调试界面演示图 由于是gif录制,为了压缩图片,帧率有点低,实际运行时,参数调整好是不会像这样一卡一顿的 ...

  8. phpcms Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE错误

    我在phpcms的模板中自定义了一个变量,变量的值是通过pc标签赋予的. <?php $url="{$v[url]}"; ?> 结果报如上错误. 实际上应把PHP语句改 ...

  9. 2018护网杯-easy_laravel 复现

    题目docker环境: https://github.com/sco4x0/huwangbei2018_easy_laravel git clone下来直接composer up -d 运行即可,可以 ...

  10. c/s和b/s的区别及实例说明【转】

    B/S结构,即Browser/Server(浏览器/服务器)结构,是随着Internet技术的兴起,对C/S结构的一种变化或者改进的结构.在这种结构下,用户界面完全通过WWW浏览器实现,一部分事务逻辑 ...