【Vue框架】使用slot插槽实现文章组件

1. 代码

1.1 App.vue

<template>
  <div id="app">
    根组件
    <hr />

    <Article>
      <!-- v-slot的简写为：# -->
      <template #title>
        <h3>飞鸟集</h3>
      </template>

      <template #content="obj">
        <div>
          <p>鸟儿愿为一朵云。</p>
          <p>云儿愿为一只鸟。</p>
          <p> {{ obj.msg }}</p>
        </div>
      </template>
   
      <template #author>
        <div>作者：泰戈尔</div>
      </template>
    </Article>
    <router-view />
  </div>
</template>

<script>
import Article from './components/Article.vue';

export default {
  components: {
    Article,
  },
  data() {
    return {
      comName: "",
    };
  },
};
</script>

<style lang="less">
#app {
  width: 100%;
  height: 300px;
  background-color: skyblue;
}
</style>

1.2 Article.vue

<template>
  <div class="article-container">
    <!-- 文章标题 -->
    <div class="header-box">
        <slot name="title"></slot>
    </div>

    <!-- 文章内容 -->
    <div class="content-box">
        <!-- 在封装组件时，为预留的slot提供属性对应的值，这种用法，叫做“作用域插槽” -->
        <slot name="content" msg="---------------"></slot>
    </div>

    <!-- 文章作者 -->
    <div class="footer-box">
        <slot name="author"></slot>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

2. 效果

【注意】分割线是用作用域插槽实现的。

---

参考： 黑马vue视频。