首页 > 其他分享> 文章详细

第九十篇：Vue 具名插槽

2022-06-03 00:00:41 阅读：159 来源： 互联网

标签：Vue 第九十 vue components 插槽组件 Article Left

好家伙

1.什么是具名插槽？

来简单理解一下，

具有自己名字的插槽，就是具名插槽

我们来尝试使用一下具名插槽:

在Article.vue组件中:

<template>
  <div class="article-container">
    <!-- 文章内容 -->
    <div class="header-box">
        <slot name="title"></slot>
    </div>
    <!-- 文章标题-->
    <div class="content-box">
        <slot name="content"></slot>
    </div>
    <!-- 文章作者 -->
    <div class="footer-box">
        <slot name="author"></slot>
    </div>
  </div>


</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.article-container{
>div{
    min-height:150px;
}
    .header-box{
        background-color: pink;
    }
    .content-box{
        background-color: lightblue;
    }
    .footer-box{
        background-color: lightsalmon;
    }
}


</style>

在App.vue组件中:

<template>
  <div>
    <h1>App根组件</h1>
    <Left>
      <!-- 1.如果要把内容填充到指定名称的插槽中,需要使用v-slot:这个指令 -->
      <!-- 2.v-slot:后面要跟上插槽的名字 -->
      <!-- 3.v-slot:指令不能直接用在元素身上,必须用在template标签上 -->
      <!-- 4.template这个标签,他是一个虚拟的标签,只起到包裹性质的作用,但是不会被渲染为任何实质性的html元素 -->
      <template v-slot:default>
        <p>我是用来测试插槽的p标签</p>
      </template>
      
    </Left>
    <Article>
     <template #title>
       <h3>我是头</h3>
     </template>

     <template #content>
       <h3>写博客真是一件开心的事情(NO)</h3>
     </template>

     <template #author>
       <h3>作者:养肥胖虎</h3>
     </template>
    </Article>
  </div>
</template>

<script>
//1.导入需要的组件
import Left from './components/Left.vue'
import Right from './components/Right.vue'
import Article from './components/Article.vue'

export default {
  data(){
    return{
      comName:'Left'
    }
  },
     components:{
        Left,
        Right ,
        Article
       //简写为 Left
     }
}
</script>

来看看效果:

标签：Vue,第九十,vue,components,插槽,组件,Article,Left
来源： https://www.cnblogs.com/FatTiger4399/p/16338580.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

第九十篇：Vue 具名插槽

1.什么是具名插槽？