vue中作用域插槽的用法

父组件：

<template>
    <div class="app">
        <son>
      <!-- 作用域插槽 -->
      <!-- 具有特殊特性 slot-scope 的 <template> 元素必须存在，表示它是作用域插槽的模板 -->
      <!-- slot-scope 的值将被用作一个临时变量名，此变量接收从子组件传递过来的 prop 对象： -->
            <template slot-scope="book">
                <span>{{ msg }}</span>
                <ul>
                  <li v-for="(a,index) in book.text" :key="index">
                    {{ a.name }}
                  </li>
                </ul>
            </template>
        </son>
    </div>  
</template>
<script>
import son from './components/son.vue'
    export default {
        components:{
            son
        },
        data() {
            return {
                 msg:'我是父组件里的信息'
            }
        }
    } 
</script>

子组件：

<template>
    <div class="app">
       <slot :text="arr"></slot>
    </div>  
</template>
<script>
    export default {
        data() {
            return {
                arr:[
                    {name:'学习vue'},
                    {name:'学习JS'},
                    {name:'学习react'},
                ]
            }
        }
    } 
</script>

效果：

image.png