使用作用域插槽，父级元素可以直接使用子元素中的数据

 

子：

作用域插槽的使用_数据
<template>
    <div>
        <slot :data="movies">
　　　　　　<ul>
　　　　　　　　<li v-for="(item,index) in movies" :key="index">
　　　　　　　　　　{{ item }}
　　　　　　　　</li>
　　　　　　</ul>
　　　　</slot>
    </div>
<template>

<script>
　　export default {
 　　　　 name: '组件名',　　　　　
　　　　　data() {
    　　　　return {
      　　　　movies: ['战狼', '肖申克的救赎', '花木兰']
    　　　　}
  　　　　},
　　}
作用域插槽的使用_数据

父：

<cpn>
<!-- 目的是获取子组件的movies -->
    <template slot-scope="slot">
       <span>{{ slot.data.join('-') }}</span>
    </template>
</cpn>

作用域插槽的使用_作用域_03