Vue插槽

vue中的插槽————slot

什么是插槽？

插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。
插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制

插槽分类

• 匿名插槽(也叫默认插槽): 没有命名,有且只有一个
• 具名插槽: 相对匿名插槽组件slot标签带name命名的
• 作用域插槽: 子组件内数据可以被父页面拿到(解决了数据只能从父页面传递给子组件)

怎么用插槽？

默认情况下是不会显示的，如下图所示，页面并没有显示增加的span 元素内容。那么我执意要加DOM元素到子组件上该怎么实现呢？这就用到了slot插槽，使用slot这个标签可以将父组件放在子组件的内容，放到它想显示的地方

		//父组件
 		Vue.component('parent', {
            template: `
                <div>
                    我是父组件
                    <slotOne>
                    	<p style="color:red">我是父组件插槽内容</p>
                    	   <!--这里不显示-->
                    </slotOne>
                </div>`
        });
        //子组件
        Vue.component('slotOne', {
            template: `
            <div>
                <p>我是子组件插槽内容</p>
            </div>
            `
        });
        new Vue({
            el: '#app'
        })

如图：

匿名插槽

我们将上面的代码改一改 , 给child组件添加slot插槽，那么父组件的添加的DOM元素就填充到这个slot插槽里面了

	//子组件
    Vue.component('slotOne', {
            template: `
            <div>
                <p>我是子组件插槽内容</p>
                <slot></slot>
            </div>
            `
       });

	 Vue.component('slotOne', {
            template: `
            <div>
                <slot></slot>
                <p>我是子组件插槽内容</p>
                
            </div>
            `
        });

注意：如果有多个DOM元素，会一起插入到这个标签内

具名插槽

现在我们需要将父组件添加的HTML标签放在子组件里的不同位置。具名插槽实现：先在子组件对应分发slot标签里，添加name=”name名” 属性，其次父组件在要分发的标签里添加 slot=”name名” 属性，然后就会将对应的标签放在对应的位置了。

简单理解就是：给子组件占的每一个坑取名，将父组件添加的HTML元素添加到指定名字的坑，就实现了分发内容在不同位置显示

【Child组件模板】

Vue.component('slotOne', {
        template: `
        <div>
            <slot name="header"></slot>
            <p>我是子组件插槽内容</p>
            <slot name="footer"></slot>
        </div>
        `
    });

【父组件引用Child组件】

  Vue.component('parent', {
        template: `
            <div>
                我是父组件
                <slotOne>
                 <p slot="header"  style="color:red">我是父组件插槽内容1</p>
                 <p slot="footer" style="color:red">我是父组件插槽内容2</p>
                </slotOne>
            </div>`
    });

v-slot

在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的特性。
v-slot 只能添加到 或自定义组件上，这点与弃用的 slot 属性不同