作用域插槽

最新推荐文章于 2024-07-06 16:47:02 发布

weixin_30897233

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量41

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/bao2333/p/10249902.html

版权

<!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>
</head>
<body>
  <!-- 
    作用域插槽可以让我们在创建组件是给slot上添加一些数据

    组件的使用者，可以根据对应组件去获取到组件的作者留在slot上的数据，并且做渲染或其他操作使用

    创建组件
      template: `
        <div>
          <slot a="1" b="2"></slot>
        </div>
      `
    使用组件时
      <组件名>
        <template slot-scope="自定义名字scope">{{scope.a}} {{scope.b}}</template>
      </组件名>

    还可以使用解构赋值
      <组件名>
        <template slot-scope="{a, b}">{{a}} {{b}}</template>
      </组件名>
   -->
  <div id="app">
    <child :movies="movies">
      <p slot-scope="o">{{o.movie}} {{o.$index}}</p>
    </child>
  </div>
  <script src="../vue.js"></script>
  <script>
    const child = {
      template: `
        <div>
          <ul>
            <li v-for="(movie, index) in movies">
              <slot :$index="index" :movie="movie">
                {{movie}}
              </slot>
            </li>
          </ul>
        </div>
      `,
      props: {
        movies: Array
      }
    }

    const app = new Vue({
      el: '#app',
      data: {
        movies: ['电影1', '电影2', '电影3']
      },
      components: {
        child
      }
    })
  
  </script>
</body>
</html>

转载于:https://www.cnblogs.com/bao2333/p/10249902.html

weixin_30897233

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
作用域插槽

<!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-...
复制链接

扫一扫