vue中slot的使用场景
vue中slot的使用场景
biaoblog.cn 个人博客
发布于 2022-08-11 18:49:08
发布于 2022-08-11 18:49:08
首先写一个head的公共组件：
<template>
<div>
<h1>1</h1>
<h2>2</h2>
<slot name="one"></slot>
<slot name="two"></slot>
</div>
</template>如我们所知，在默认情况下引用这个组件，这个组件的内容会全部显示出来。
但是我们现在的需求是one页面只期望显示slot为one的部分：
<template>
<div>
<div>
<headTop>
<div slot="one">
我是插槽one
</div>
</headTop>
</div>
{{key}}
</div>
</template>
<script>
import headTop from '@/components/head.vue'
export default {
data () {
return {
key: '先登录'
}
},
components: {
headTop
}
}
</script>注：在head组件中的slot只是插槽的作用，具体的组件内容需要在父组件的 <div slot="one">我是插槽one</div> 中自定义
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读