作用域插槽的使用

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

 

子：

<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>