Vue-项目中遇到的知识点--作用域插槽

作用域插槽

作用域插槽，我的理解是：
第一：在子组件中绑定我们需要的数据
第二：从父组件中，通过使用已经注册的子组件标签，然后在属性slot-scope进行定义，从而使用子组件中绑定的数据。

<div id="father">
        <son>
            <!-- 2.获取子组件中绑定的数据info -->
            <template slot-scope="slot">
                <p>{{slot}}<==这就是子组件传过来的值</p>
                <!--3.通过slot.data获取我们刚才传入的数据data-->
                <li v-for="item in slot.data">{{item}}</li>
            </template>
        </son>

</div>
    
<template id="son">
	<div>
		<!--1.在slot标签中绑定子组件中的数据-->
        <slot :data="info"></slot>
    </div>
</template>

<script>
    const app = new Vue({
        el: '#father', //用于挂载要管理的元素
        components: {
        	son: {
        		template: '#son',
        		data() {
        			return {
        				info: ['a','b','c']
                    }
                },
             }
        }
     })
</script>