vue的插槽理解

默认插槽

声明一个child-component组件，
如果现在我想在内放置一些内容;

<div id="app">
    <child-component></child-component>

</div>
<script>
    Vue.component('child-component',{
        template:`
            <div>Hello,World!</div>
        `
    })
    let vm = new Vue({
        el:'#app',
        data:{

        }
    })
</script>

在组件里面加入内容

 <child-component>你好</child-component>

具名插槽

父组件

1. 这里v-slot 只能在 template 里面使用
2. v-slot:item item为子组件slot的名字
3. 遍历时，需要绑定key
   

子组件

slot里面 name 的值为 父组件定义那个名字

作用域插槽

父组件

itemProps是子组传递来的，slot里面绑定的值

子组件

在slot里面通过 v-bind绑定值,传递给父组件