作用域插槽

当我们希望数据由子组件提供，页面结构由父组件提供，这种情况下我们可以作用域插槽。

v-slot

子组件中有数据，但是需要在父组件中控制页面结构

子组件：

<template>
    <div>
        <h1>子组件</h1>
        <ul>
            <slot name="list" v-for="item of movies" :item="item"></slot>
        </ul>
    </div>
</template>

<script>
export default {
    data(){
        return{
            movies:[
                '怒火追凶','上海王2','谎言大师'
            ]
        }
    }
}
</script>
<style></style>

父组件：

<template>
    <div>
        <h1>父组件</h1>
        <hr>
        <v-child>
            <template v-slot:list="props">
                <li>{{ props.item }}</li>
            </template>
        </v-child>
    </div>
</template>
<script>
import vChild from './Child'
export default {
    components:{
        vChild
    }
}
</script>
<style></style>