Vue内置组件之slot

最新推荐文章于 2024-01-08 20:08:25 发布

庚中

最新推荐文章于 2024-01-08 20:08:25 发布

阅读量351

点赞数

CC 4.0 BY-SA版权

分类专栏：十二.vue 文章标签： Vue内置组件之slot

本文链接：https://blog.youkuaiyun.com/xiaodi520520/article/details/88841617

十二.vue 专栏收录该内容

60 篇文章

订阅专栏

本文介绍了如何使用Vue内置组件的slot特性来传递内容。通过在父组件中设置slot属性传递键名，然后在子组件模板中使用slot双标签并用name属性接收，实现了将内容插入到特定位置的功能。示例代码展示了具体操作步骤，并提到了Vue 2.6中插槽的变化，建议参考官方文档以获取最新信息。

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

先准备一个组件:
在这里插入图片描述
现在有一个需求是:在三个p标签里加上各自的内容,怎么实现呢?
总共分为两步:
第一步:在html的组件中用slot属性传递值(slot属性里写键名) .

    <div id="app">
      <jspang>
        <!-- 第一步:传递数值(slot属性里写键名) -->
        <span slot="bolgUrl">{{ jspangData.bolgUrl }}</span>
        <span slot="netName">panda</span>
        <span slot="skill">{{ jspangData.skill }}</span>
      </jspang>
    </div>

第二步:在组件模板中用slot标签接收值(注意slot标签是双标签,里面用name属性来接收).

    <template id="tep">
      <div>
        <!-- 第二步接收slot标签的值(注意slot标签是双标签,里面用name属性来接收) -->
        <p>播客地址:<slot name="bolgUrl"></slot></p>
        <p>网名:<slot name="netName"></slot></p>
        <p>所会技术:<slot name="skill"></slot></p>
        >
      </div>
    </template>

实现效果:
在这里插入图片描述
附完整代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>lianxi</title>
  </head>
  <body>
    <div id="app">
      <jspang>
        <!-- 第一步:传递数值(slot属性里写键名) -->
        <span slot="bolgUrl">{{ jspangData.bolgUrl }}</span>
        <span slot="netName">panda</span>
        <span slot="skill">{{ jspangData.skill }}</span>
      </jspang>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <template id="tep">
      <div>
        <!-- 第二步接收slot标签的值(注意slot标签是双标签,里面用name属性来接收) -->
        <p>播客地址:<slot name="bolgUrl"></slot></p>
        <p>网名:<slot name="netName"></slot></p>
        <p>所会技术:<slot name="skill"></slot></p>
        
      </div>
    </template>
    <script>
      let jspang = {
        template: '#tep'
      }

      let app = new Vue({
        el: '#app',
        data: {
          jspangData: {
            bolgUrl: 'http://jspang.com',
            netName: 'jspang',
            skill: 'web前端'
          }
        },
        components: {
          "jspang": jspang
        }
      })
    </script>
  </body>
</html>