Vue作用域插槽的使用

- 作用域插槽是slot一个比较难理解的点，而官方文档有说的有点不清楚。

- 这里，我们用一句话对其做一个总结，

   父组件替换插槽的标签，但是内容由子组件来提供。

 

-  我们先来看一个这样的要求：

   - 子组件包括一组数据，比如：fruit:["苹果","橘子","香蕉","榴莲","橙子"]

   -  需要在多个界面进行展示：1.某些界面是一水平方向进行展示的，2.某些界面以列表进行展示的，3.某些界面直接展示一个数组：

-  这个问题的关键点就是父组件如何获取到子组件的数据进行展示：

 

请看例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <cpn></cpn>


    <cpn>
      <!--在这里用一个template标签；并加上属性slot-scope="slot";然后用slot调用子组件模板的slot的属性data就-->
      <!--会获得子组件的数据了；然后再按自己想的方式进行展示-->
      <template slot-scope="slot">
        <span v-for="item in slot.data">{{item}}----</span>
      </template>
    </cpn>


    <cpn></cpn>
  </div>

  <template id="i1">
    <div>
    <!--给slot定义一个属性；将子组件的变量值赋给它-->
      <slot :data="messages">
        <ul>
          <li v-for="item in messages">{{item}}</li>
        </ul>
      </slot>
    </div>
  </template>
<script src="../js/vue.js"></script>
  <script>
      const app = new Vue({
          el:"#app",
          data:{
              message:"欢迎来到Vue"
          },
        components:{
            cpn:{
              template:"#i1",
              data(){
                return {
                  messages:["苹果","橘子","香蕉","榴莲","橙子"]
                }
              }
            }
        }
      })
  </script>
</body>
</html>

 

posted @ 2020-05-30 21:07  白头翁z  阅读(570)  评论(0)    收藏  举报