vue组件插槽

1，组件插槽

solt就是插槽的意思，就是一块html模板，最后到底怎么显示是由父组件决定的。但是插槽显示的位置是由子组件决定的，slot写在组件template的哪块，父组件传过来的模板将来就显示在哪块。这样就使组件可复用性更高，更加灵活。我们可以随时通过父组件给子组件加一些需要的东西。

2，slot

父组件向子组件传递模板内容

 	<div id="app">
        <menu-list>父组件内容</menu-list>
    </div>
    <script>
        Vue.component('menu-list', {
            template: `
                <div>
                    <slot></slot>    
                </div>
            `
        })
        var vm = new Vue({
            el: '#app',  
        })
    </script>

实际上“父组件内容” 就是通过组件插槽slot的形式，把父组件的模板内容传递给子组件，当然如果子组件模板本身就有内容的话，也会被父组件的模板内容覆盖，若父组件模板没有内容就会默认渲染slot里面的内容

3，具名插槽

也就是在slot内部添加了一个name属性

<slot name="user"></slot>

作用：若有多个slot，可以通过name属性更加方便的进行渲染。

4，作用域插槽

之前的只是实现了往组件内加入元素，并没有实现组件数据的交互，而v-slot就可以把组件中的数据暴露出去

	<div id="app">
        <menu-firut :list="firut">
            <template v-slot="scope">
                <p v-if="scope.info.id==1" class="current">{{scope.info.name}}</p>
                <p v-else>{{scope.info.name}}</p>
            </template>
        </menu-firut>
    </div>
    <script>
        Vue.component('menu-firut', {
            props: ['list'],
            template: `
                <div>
                    <ul>
                        <li :key="item.id" v-for="item in list">
                            <slot :info="item">{{item.name}}</slot>
                        </li>    
                    </ul>    
                </div>
            `
        })
        var vm = new Vue({
            el: '#app',
            data: {
                firut: [{
                    id: 1,
                    name: 'apple'
                }, {
                    id: 2,
                    name: 'banbana'
                }, {
                    id: 3,
                    name: 'orange'
                }]
            },
        })
    </script>

插槽通过属性绑定的形式，向外暴露一个动态属性info，作用域插槽就可以通过v-slot来接收数据，并且处理数据。类似于子组件向父组件传递数据，只不过是通过v-slot来接收的。可以使用v-slot.info就能拿到子组件暴露的数据。