首页 > 其他 > 详细

对vue中插槽(slot)的理解

时间:2020-09-11 23:28:03      阅读:104      评论:0      收藏:0      [点我收藏+]

参考博客

单个插槽

单个插槽是vue的官方叫法,也可以叫它默认插槽,或者与具名插槽相对,也可以成为匿名插槽,因为它不用设置name属性

单个插槽可以放在组件的任意位置,但一个组件最多有一个该类插槽。

例子:

<template>
	<div class="father">
        <span>这里是父组件</span>
        <child>
        	<div>
                父组件在子组件内添加的html片段
            </div>
        </child>
    </div>
</template>
<template>
	<div class="child">
        <span>这里是子组件</span>
        <slot></slot>
    </div>
</template>

slot标签将会被替换为父组件在该组件上添加的html片段。

具名插槽

具名插槽可以设置name属性,这意味着一个组件内可以有多处插槽。

例子:

<template>
	<div class="father">
        <span>这里是父组件</span>
        <child>
        	<div slot="slot1">
                父组件在子组件内添加的html片段
            </div>
            <div slot="slot2">
                父组件在子组件内添加的html片段
            </div>
        </child>
    </div>
</template>
<template>
	<div class="child">
        <slot name="slot1"></slot>
        <span>这里是子组件</span>
        <slot name="slot2"></slot>
    </div>
</template>

这等效于:

<template>
	<div class="father">
        <span>这里是父组件</span>
        <child></child>
    </div>
</template>
<template>
	<div class="child">
        <div slot="slot1">
            父组件在子组件内添加的html片段
        </div>
        <span>这里是子组件</span>
        <div slot="slot2">
            父组件在子组件内添加的html片段
        </div>
    </div>
</template>

作用域插槽

对比前面两种插槽,我们可以叫它带数据的插槽。

但是作用域插槽要求,在slot上面绑定数据。也就是你得写成大概下面这个样子。

<slot :data="data"></slot>
 export default {
    data: function(){
      return {
        data: [‘zhangsan‘,‘lisi‘,‘wanwu‘,‘zhaoliu‘,‘tianqi‘,‘xiaoba‘]
      }
    },
}

插槽最后显示不显示是看父组件有没有在child下面写模板,像下面那样。

<child>
    <div slot-scope="hht">{{hht.data}}</div>
</child>

对vue中插槽(slot)的理解

原文:https://www.cnblogs.com/hhtqwq/p/13654797.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!