vue_组件插槽详述

在使用组件时，在引用的组件标签中添加内容时，会自动被组件中的模板代替，如【例1】

【例1】

<my-comp>Have a happy Life</my-comp>

Vue.component('my-comp',{template:`<div> Life is a shit! </div>`
})

【结果】

1.插槽的使用

当不想要传递给组件的内容被替代，则可以使用组件插槽来解决这个问题，具体使用方法是，在组件模板中添加 <slot> 标签，当组件渲染时，<slot></slot> 将会被替换为“写在组件标签结构中的内容”，如【例2】

【例2】

Vue.component('my-comp',{template:`<div> Life is a shit! <slot></slot>    </div>`
})

【结果】

【注】

插槽内可以包含任何模板代码，包括 HTML 和其他组件
如果组件没有包含 <slot> 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃

2.编译作用域

因为父级模板里的所有内容都是在父级作用域中编译的，子模版里的所有内容都是在子作用域中编译的，所以插槽不能访问其所在组件的作用域，而是模板的作用域，如【例3】

【例3】

<my-comp>Hi {{ userName }}, Have a happy Life!</my-comp>

//组件
Vue.component('my-comp',{template:`<div><slot></slot>    </div>`,data(){return {userName: 'Jony'}}
})
//vue实例
const vm = new Vue({el:'#app',data:{userName:'Jim'}
})

【结果】

3.默认插槽

默认插槽即，若在组件引用时，没有像其传递内容，则使用默认插槽的内容（也称为后备内容）；若在引用时，传递了内容，则渲染传递的内容，如【例4】

【例4】

组件

Vue.component('my-button',{template:`<button type="submit"><slot>Submit</slot>    </button>`
})

未传递内容
<my-button></my-button>
【结果】

传递内容
<my-button>Hit me</my-button>
【结果】

4.具名插槽

（1）具名插槽使用

若在一个组件中需要使用多个插槽，则要使用具名插槽来区分，其使用方式为：在组件中的 <slot> 元素上使用一个特殊的特性 name，利用这个特性可以定义额外的插槽；在引用组件时，需要在 <template> 元素上使用 v-slot 指令，v-slot 的参数即是特性 name，如【例5】

【注】一个不带name的 <slot> 会带有隐含的名字“default”。

【例5】

//组件
Vue.component('my-cmp',{template:`<div class="container"><header><slot name='header'></slot></header><main><slot name='main'></slot></main><footer><slot name='footer'></slot></footer><slot></slot></div>`
})

<!-- 组件引用 -->
<my-cmp><template v-slot:header><div>header</div></template><template v-slot:main><div>main</div></template><template v-slot:footer><div>footer</div></template><template v-slot:default><div>default</div></template>
</my-cmp>

【结果】

【注】v-slot 只能添加在 <template> 上，只有一种情况特殊（介绍如下）

（2）具名插槽的缩写

<my-cmp><template #header>header</template><template #default>default</template> <template #main>main</template> <template #footer>footer</template>
</my-cmp>

【注】该缩写只有在其有参数时可以使用

5.作用域插槽

为了能够让插槽内容访问子组件的数据，可以将子组件的数据作为绑定在 <slot> 元素的一个特性（插槽 prop），则在父级作用域中，可以给v-slot带一个值来定义所提供的插槽 prop 名字，如【例6】

【例6】

//组件
Vue.component('my-comp1',{data(){return {user:{name:'桃花扇J',age:18}}},template:`<div><slot v-bind:user="user"></slot>    </div>`
})

<my-comp1><template v-slot:default="slotProps">{{ slotProps.user.name }}</template>
</my-comp1>

【结果】

（1）独占默认插槽的缩写语法

当被提供的内容只有默认插槽时，组件的标签可以被当作插槽的模板来使用，此时，可以将 v-slot 直接用在组件上，且可以缩写为以下形式：

<my-comp1 v-slot="slotProps">{{ slotProps.user.name }}
</my-comp1>

【注】默认插槽的缩写语法不能和具名插槽混用，会导致作用域不明确，即只要出现多个插槽，就需要为所有的插槽使用完整的基于 <template> 的语法

（2）解构插槽 Prop

使用结构传入具体的插槽prop会使模板更简洁

<my-comp1 v-slot="{ user }">{{ user.name }}
</my-comp1>

根据解构的语法，还可以给 prop 重命名

<my-comp1 v-slot="{ user:person }">{{ person.name }}
</my-comp1>