Vue使用插槽和具名插槽实现组件内容的传递

最新推荐文章于 2024-05-13 10:31:43 发布

BirdMan98

最新推荐文章于 2024-05-13 10:31:43 发布

阅读量605

点赞数

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

本文链接：https://blog.csdn.net/weixin_41405524/article/details/125973030

版权

Vue 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

介绍

Vue使用插槽来传递组件内容

效果

在这里插入图片描述

代码

组件内插入插槽，插槽内容由父组件定义，如果有多个插槽且有顺序，则使用具名插槽指定名称，v-slot也可以使用#代替

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>lesson 20</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
  // slot 插槽
  // slot 中使用的数据，作用域的问题
  // 父模版里调用的数据属性，使用的都是父模版里的数据
  // 子模版里调用的数据属性，使用的都是子模版里的数据
  // 具名插槽
  const app = Vue.createApp({
    template: `
      <layout>
        <template v-slot:header>
          <div>header</div>
        </template>
        <template v-slot:footer>
          <div>footer</div>
        </template>
      </layout>
    `
  });

  app.component('layout', {
    template: `
      <div>
        <slot name="header"></slot>
        <div>content</div>
        <slot name="footer"></slot>
      </div>
    `
  });

  const vm = app.mount('#root');
</script>
</html>