Vue笔记:插槽的使用


插槽

组件的插槽是为了让我们封装的组件更加具有扩展性
让使用者可以决定组件内部的一些内容到底展示什么
封装插槽的方法:抽取共性,保留不同
最好的封装方式就是将共性抽取到组件中,将不同暴露为插槽
一旦预留了插槽,就可以让使用者根据自己的需求,决定插槽中插入什么内容
插槽的作用是 混合父组件的内容与子组件自己的模版

<div id='father'>
<h1>{{ name }}</h1>
<son></son>
</div>

<template id='son'>
<div>
<h1>{{ name }}</h1>
</div>
<template>

const son = {
template:'#son',
data() {
return {
name:'我是儿子'
}
}
}

const father = new Vue({
el:"#father",
data:{
name:'我是爹'
},
components:{ son }
})

打印到页面上看看
Vue笔记:插槽的使用
很好,爹和儿子都出来了

我们使用儿子的时候,是这样使用的

<div id='father'>
<!-- 省略 -->
<son></son>
</div>

可是,如果我们这样写,这一串文字能出现么?

<son>插槽要来了插槽要来了</son>

打印一下
Vue笔记:插槽的使用

其实不能出现的原因我们也知道,在页面渲染的时候,子组件,也就是template标签,把正在使用的son标签一整个给替换了,所以,那一串文字并没有出现

这样做明显不符合组件复用性的思想

别怕,enter妹妹手把手教你做

其实也很简单,我们只需要这么做

  <template id="son">
<div>
<h1>{{ name }}</h1>
<slot></slot>
</div>
</template>

添加了slot标签之后就能显示那一串文字了
爱学习的弟弟们肯定已经翻开了网易有道词典,其实slot这个单词的意思就是位置,狭槽的意思

打印到页面上看一下
Vue笔记:插槽的使用

具名插槽

顾名思义,就是有名字的插槽

上代码,如果我给子组件定义三个插槽,那么那一串文字插在哪里呢?

先把那一串文字用p标签包起来

<div di='father'>
//...
<son><p>插槽要来了</p></son>
</div>

<template id="son">
<div>
<h1>{{ name }}</h1>
<slot></slot>
<slot></slot>
<slot></slot>
</div>
</template>

实践是检验真理的唯一标准,我们打印到页面看看
Vue笔记:插槽的使用

可以看出来,我们son标签里有三个插槽,但是只提供了一个插头(p标签)
这个插头会插上所有的插槽
我们也给他来三个插头

<div id="father">
<h1>{{ name }}</h1>
<son>
<p>我是下面的白熊</p>
<p>我是上面的棕熊</p>
<p>我是中间的熊猫</p>
</son>
</div>

enter妹妹可喜欢咱们裸熊了,顺便给你们安利一下
打印到页面看看
Vue笔记:插槽的使用

可以看出来这三个p标签都用复用了三次
那么怎么避免这种情况,还能让三个小熊按照顺序摞在一起呢?
这时候就可以使用具名插槽了

  <div id="father">
<h1>{{ name }}</h1>
<son>
<p slot='bottom'>我是下面的白熊</p>
<p slot="top">我是上面的棕熊</p>
<p slot="center">我是中间的熊猫</p>
</son>
</div>

  <template id="son">
<div>
<h1>{{ name }}</h1>
<slot name='top'></slot>
<slot name='center'></slot>
<slot name='bottom'></slot>
</div>
</template>

儿子组件的slot插槽添加name属性
父亲组件使用的在标签里添加slot属性
两个属性一致就会插到对应的插槽里面

看一下页面效果
Vue笔记:插槽的使用
Vue笔记:插槽的使用

插槽默认标签

在使用具名插槽的时候,还可以设置一个默认标签
比如我想在bottom插槽里设置一个默认值button按钮
当这个插槽没人插的时候,button就会显示出来
可以这么写

<!-- <p slot='bottom'>我是下面的白熊</p> -->

<slot name='bottom'><button>按钮</button></slot>

看一下页面效果
Vue笔记:插槽的使用

插槽用哪里的数据

当在组件里面使用变量的时候都会先看看这个变量是哪个模板里面的,使用对应模板的Vue实例里面的变量

让白熊后面跟一个num

<p slot='bottom'>我是下面的白熊{{ num }}</p>

儿子组件里设置一个num值为50

const son = {
template:"#son",
data() {
return {
name:'我是儿子',
num:50
}
}
}

爹组件里设置一个num值为10

const father = new Vue({
el:'#father',
data:{
name:'我是爹',
num:10
},
components:{ son }
})

那么问题来了,白熊会用哪一个num呢?
打印到页面上看一下
Vue笔记:插槽的使用

如何让儿子用自己的数据呢?

点击查看

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

Vue笔记:插槽的使用

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » Vue笔记:插槽的使用
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏