vue的插槽slot的用法

学魔学编程

于 2021-11-12 17:10:51 发布

阅读量95

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_59717525/article/details/121291976

版权

vue 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了如何在Vue中通过模板和插槽实现父组件向子组件的数据传递。示例展示了在app.vue父组件中，使用`<template>`定义插槽，将标题、内容和作者信息传递给Article子组件。子组件article.vue接收到这些插槽内容并展示在相应的区域，如绿色背景的标题区、深粉背景的内容区和蓝色背景的作者区。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

APP父组件引入子组件通过卡槽添加数据

app.vue

<template>
  <div id="app">
    <Article>
      <template #title>
        <h1>标题</h1>
      </template>

      <template v-slot:content>
        <h2>内容</h2>
      </template>

      <template #auth>
        <h3>作者</h3>
      </template>
    </Article>
  </div>
</template>

<script>
import Article from "@/components/Article";
export default {
  name: "App",
  components: {
    Article,
  },
};
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

article.vue

<template>
  <div>
<div class="title" msg="vue 您好">
      <slot name="title">

      </slot>
</div>
      <hr />
      <div class="content">
      <slot name="content">

      </slot>
</div>
 <hr />
<div class="auth">
      <slot name="auth">

      </slot>
</div>
      




  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
 .title{
     padding:10px;
     background: green;
     color:#fff;
 }
  .content{
     padding:10px;
     background: deeppink;
     color:#fff;
 }
  .auth{
     padding:10px;
     background: blue;
     color:#fff;
 }
</style>