vue作用域插槽的使用

最新推荐文章于 2023-01-31 17:52:09 发布

尚憨憨

最新推荐文章于 2023-01-31 17:52:09 发布

阅读量138

点赞数

文章标签： vue

原文链接：https://blog.csdn.net/weixin_43392489/article/details/108290028

版权

  <!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>Document</title>
      <script src="../vue01/vue.js"></script>
  </head>

  <body>
      <div id="app">
          <cpn></cpn>
          <cpn>
              <!-- 目的  获取子组件中的movies -->
              <template slot-scope="slot">
                  <!-- <span v-for="item in slot.data">{{item}} - </span> -->
                  <span>{{slot.data.join( ' - ')}}</span>
              </template>
          </cpn>
          <cpn>
              <!-- 目的  获取子组件中的movies -->
              <template slot-scope="slot">
                  <span v-for="item in slot.data">{{item}} * </span>
              </template>
          </cpn>

      </div>
      <template id="cpn">
          <div>
              <slot :data="movies">
                  <ul>
                      <li v-for="item in movies">{{item}}</li>
                  </ul>
              </slot>

          </div>
      </template>
  </body>

  </html>
  <script>
      const app = new Vue({
          el: "#app",
          data: {},
          methods: {},
          components: {
              cpn: {
                  template: "#cpn",
                  data() {
                      return {
                          movies: ["11", "22", "33", "44", "55"]
                      }
                  }
              }
          }
      })
  </script>