15.作用域插槽的使用

作用域插槽

作用：父组件提供标签进行渲染，子组件提供数据

用法：通过给子组件模板，slot标签添加属性:data="数据"，这里的data变量名可以随便起，然后在父组件中引用这个data变量，首先，父组件中需要通过template进行包裹，然后使用v-slot:default="slot",来获取子组件的实例对象，这里的slot名字可以随便起，然后在下面调用的时候，需要通过slot.data.数据的方式进行调用，就能拿到子组件的数据了。

<div id="app">
        <cpn1></cpn1>
        <cpn1>
            <template v-slot:default="slot">
                <ol>
                    <li v-for="item in slot.data">{{ item }}</li>
                </ol>
            </template>
        </cpn1>
    </div>
    <template id="cpn">
        <div>
            <slot :data="movies">
                <ul>
                    <li v-for="item in movies">{{ item }}</li>
                </ul>
            </slot>
        </div>
    </template>
    <script>
        let cpn1 = {
            template: "#cpn",
            data() {
                return {
                    movies: ['海王', '海贼王', '海尔兄弟']
                }
            }
        }
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            components: {
                cpn1
            }
        });
    </script>