vue父子组件——作用域插槽

<!-- 子组件 -->
<template>
    <div class='container'>
        <div>子组件</div>
        <slot :data="list"></slot>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                list: ['guangdong', 'fujian', 'hunan', 'jiangxi']
            }
        }
    }
</script>

<!-- 父组件 -->
<!-- 父组件 -->
<template>
    <div class='container'>
        <div>父组件</div>
        <Child ref="child">
            <template slot-scope="scope"> 
                <ul>
                    <li v-for="(item, index) in scope.data" :key="index">{{ item }}</li>
                </ul>
            </template>
        </Child>
    </div>
</template>

<script>
    import Child from '@/components/Child'
    export default {
        components: { Child }
    }
</script>