插槽（slot）

最新推荐文章于 2024-10-16 15:55:43 发布

厕所打你

最新推荐文章于 2024-10-16 15:55:43 发布

阅读量113

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_44645309/article/details/113618888

版权

作用域插槽

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>test</title>
  <style>
  </style>
</head>

<body>
  <div id="example">
    <cpn></cpn>
    <cpn>
      <template slot-scope="slot">
        <span v-for="i in slot.data">{{i}} </span>
      </template>
    </cpn>
  </div>

  <template id="cpn">
    <div>
      <slot :data="pls">
        <ul>
          <li v-for="i in pls">{{i}}</li>
        </ul>
      </slot>
    </div>
  </template>
  <script type="text/javascript" src="D:/web/js/vue/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#example',
      data: {
      },
      components: {
        cpn: {
          template: '#cpn',
          data() {
            return {
              pls: ['py','js','c']
            }
          }
        }
      }
    })
  </script>
</body>

</html>