Slot插槽

  • 父组件向子组件传递
  • 父组件将内容分发到子组件
  • slot插槽的值只读,不能在子组件中修改
  • slot插槽也可以作为组件之间的通信方式

默认插槽

父组件中:使用Son组件
<template>
<Son>
<ul> //子组件如果不定义插槽 这里面的ul不起作用
<li>我</li>
<li>爱</li>
<li>你</li>
</ul>
</Son>
</template> 子组件中:
<template>
<div>
<!-- 定义插槽 -->
<slot>父组件中没有内容就显示这句话...</slot>
</div>
</template>

具名插槽

#两种方式
`注意 v-slot:简写为 # 且 具名插槽需要用 template 包裹(组件不用 template 包裹)`
父组件中:使用Son组件
<template>
<Son>
<h1 slot="demo1">迷死他<h2>
<ul slot="demo2">
<li>你</li>
<li>爱</li>
<li>我</li>
</ul>
</Son>
</template>
//第二种写法 必须要加上template标签
<template v-slot:demo2>
<ul>
<li>我</li>
<li>爱</li>
<li>你</li>
</ul>
</template> 子组件中:
<template>
<div>
<!-- 定义插槽 -->
<slot name="demo1">父组件中没有内容就显示这句话...</slot>
<slot name="demo2">父组件中没有内容就显示这句话...</slot>
</div>
</template>

作用域插槽

#数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。(son组件在father组件中使用,但是数据来源是Son组件本身,这时就需要在Son组件中用作用域插槽将数据传输给插槽的使用者)
`父组件中:`
方法一:
<Son>
<template scope="formSon">
<!-- dataSource来子组件 -->
<ul>
<li v-for="(k,index) in dataSource" :key="index">{{k}}</li>
</ul>
</template>
</Son>
方法二:
<Son>//第二种写法
<template slot-scope="formSon">
<!-- 生成的是h4标题 -->
<h4 v-for="(k,index) in dataSource" :key="index">{{k}}</h4>
</template>
</Son> `子组件中:`
<template>
<div>
<slot :dataSource="dataSource"></slot>
</div>
</template>
<script>
export default {
//数据在子组件自身
data() {
return {
dataSource:['lht','lht1','lht2','lht3']
}
},
}
</script>

应用场景示例

template中的插槽---具名插槽

#父组件中:father.vue
#导入子组件
import Son from './son.vue'
<template>
<Son>
<template v-slot:www>
<div>......</div>
//div中可以用来取父组件的值,存放到插槽再分发给子组件
</template>
</Son>
</template> #子组件中 son.vue 使用父组件中的插槽
<slot name="www"></slot>
//渲染后就出现父组件的结构内容

Vue2-Slot插槽使用的更多相关文章

  1. Vue结合slot插槽分发父组件内容实现高度复用、更加灵活的dialog组件

    之前写过一篇关于vue实现dialog会话框组件的文章(http://www.cnblogs.com/fozero/p/8546883.html)[http://www.cnblogs.com/foz ...

  2. Vue slot插槽

    插槽用于内容分发,存在于子组件之中. 插槽作用域 父级组件作用域为父级,子级组件作用域为子级,在哪定义的作用域就在哪. 子组件之间的内容是在父级作用域的,无法直接访问子组件里面的数据. 插槽元素 &l ...

  3. vue slot插槽的使用

    slot插槽的使用场景 父组件向子组件传递dom时会用到插槽   作用域插槽:当同一个子组件想要在不同的父组件里展示不同的状态,可以使用作用域插槽.展示的状态由父组件来决定   注:想要修改父组件向子 ...

  4. Vue slot插槽内容分发

    slot插槽使用 使用场景,一般父组件中又一大段模板内容需要运用到子组件上.或者更加复杂的,子组件需要运用到父组件大段模板内容,而子组件却不知道挂载的内容是什么.挂载点的内容是由父组件来决定的. Sl ...

  5. vue中的slot插槽

    插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示.以及怎样显示由父组件来决定. 实际上,一个slot最核心的两个问题这里就点出来了,是显示不显示和怎样显示. 1.navigation ...

  6. 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件

    写在前面 之前写过一篇关于vue实现dialog会话框组件的文章http://www.cnblogs.com/fozero/p/8546883.html, 讲到了如何实现一个vue对话框组件,其中涉及 ...

  7. slot插槽(学习笔记)

    slot插槽(有默认值,也有名称)一般情况下通过名称进行匹配什么是插槽,有什么用?插槽相当于插入的一个东西,可以用来灵活的封装组件,比如说封装一个模态框对组件进行内容的定制,slot插槽,一对组件标签 ...

  8. Vue(14)slot插槽的使用

    为什么使用slot slot(插槽) 在生活中很多地方都有插槽,电脑usb的插槽,插板当中的电源插槽 插槽的目的是为了让我们原来的设备具备更多的扩展性 比如电脑的USB我们可以插入U盘,手机,鼠标,键 ...

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

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

  10. 对爱奇艺PC Web主站来说,良好的SEO能够帮助其获得更多的搜索流量,因而页面上一些非常重要的内容仍然需要依靠服务端进行渲染,由于另外开发一套基于Node的SSR后台成本较高,而乐趣(基于java和velocity模板引擎)平台作为渲染系统已经十分成熟且运行稳定,在充分试验后,我们决定在Uniqy中使用服务端同步与客户端浏览器异步二次渲染相结合的方式,结合Vue2.0提供的 slot插槽机制,很

    https://mp.weixin.qq.com/s/eB20BoqzENO_oNk8eDg4Eg 干货|爱奇艺PC Web新框架实践 原创: 前端研发团队 爱奇艺技术产品团队 昨天      

随机推荐

  1. HTML5 localStorage使用方法及注意点

    html5新增了在客户端存储数据的新方法:1.localStorage - 没有时间限制的数据存储:2.sessionStorage - 针对一个session的数据存储,当用户关闭浏览器窗口后,数据 ...

  2. 让我为你介绍一个神器:Chimee,一套可扩展的 H5 视频播放器解决方案

    Chimee(读"奇米", [tʃɪ'mɪ:])是由奇舞团开源的一套 H5 视频播放器解决方案,由奇舞团视频云前端团队结合在业务和视频编解码方向的沉淀积累倾心打造. Chimee ...

  3. java中异常(Exception)的定义,意义和用法。举例

    1.异常(Exception)的定义,意义和用法 我们先给出一个例子,看看异常有什么用? 例:1.1- public class Test {    public static void main(S ...

  4. 用 rollup + gulp 造个轮子,别说还挺香

    前戏 我是16年入了前端的坑,17年知道了gulp和rollup这两个玩意儿.由于那时webpack势头很猛,便一直没有正眼瞧过它一眼. 直到20年进了一家小公司,做了很多类似的小项目,相同的代码拷来 ...

  5. numpy---(上)

    Numpy Numpy ndarray N维数组对象ndarray, 是一系列同类型数据的集合, 索引以0下标开始, 创建一个ndarray对象, 需调用array函数: numpy.array(ob ...

  6. LibreOffice(开源免费办公软件)

    LibreOffice(开源免费办公软件) 官方地址 中文网站:https://zh-cn.libreoffice.org/ 下载地址: https://zh-cn.libreoffice.org/d ...

  7. QT-图标设置

    记录一下怎么在QT里添加图片,包括exe图标和里面使用的其他图片. 注意这个图片是指ico后缀的图片,去网上搜就有了,一大堆. 随便找的一个在线转换,http://www.bitbug.net/ 新建 ...

  8. 【直播回顾】OpenHarmony知识赋能第四期第二课——GPIO驱动开发

    3月17日晚上19点,​知识赋能第四期直播的第二节课<OpenHarmony标准系统HDF框架之GPIO驱动开发>​,在OpenHarmony开发者成长计划社群内成功举办. 本期课程,由​ ...

  9. python黑帽子(第二章)

    TCP客户端 在渗透测试工程中,我们经常会遇到需要创建一个TCP客户端来连接网络.发送垃圾数据.进行模糊测试等任务的情况.但是所处环境不具备丰富的网络工具,下面是一个简单的TCP客户端 import ...

  10. Mozi.HttpEmbedded嵌入式Web服务器

    Mozi.HttpEmbedded 嵌入式Web服务器 项目介绍 Mozi.HttpEmbedded是一个基于.Net构建的嵌入式Web服务器,为.Net App提供web服务功能. 嵌入式的目标不是 ...