Vue内置组件之slot

先准备一个组件:
在这里插入图片描述
现在有一个需求是:在三个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>

官方案例:
在这里插入图片描述
需要注意的是插槽在vue2.6有变更,传送门:https://cn.vuejs.org/v2/guide/components-slots.html

猜你喜欢