slot插槽

<slot></slot>

1. 默认插槽

引入：原本的分类组件是显示的文字，但现在某些需要换成图片 / 视频，用很多的 v-show 去控制就很麻烦

作用：直接把组件标签中的所有内容放到想要放的位置

App.vue

<template><div id="app"><!-- 默认插槽：直接把所有东西解析到该组件里的<slot></slot>位置 --><ElementTest><h6>789</h6><h6>hhh</h6></ElementTest></div>
</template><script>
import ElementTest from './components/ElementTest.vue'export default {name: 'App',components: {ElementTest}
}
</script><style>
</style>

ElementTest.vue

<template><div id="container"><h2>123</h2><!-- 1. slot标签会将App.vue中<ElementTest>子组件标签中的内容全部放入到当前位置 --><slot></slot><h2>456</h2><!-- 2. 子组件可以插入多个slot槽 --><!-- <slot></slot> --></div>
</template><script>export default{		name: 'ElementTest'}
</script><style scoped>#container {text-align: center;}
</style>

2. 具名插槽

引入：某个分类组件中需要显示多个分类，每个分类的内容各不相同

作用：可以分别控制组件中的想要渲染的html标签的内容，slot标签用name属性取名，<template>标签使用属性 slot = [slot标签的name名]

App.vue

<template><div id="app"><!-- 默认插槽：直接把所有东西解析到组件里的<slot></slot>位置 --><ElementTest><!-- 1. 组件标签中用template标签包裹需要渲染的内容，定义属性 slot = [slot标签的name名] --><template slot="first_slot"><h6>hhhh</h6></template><template slot="second_slot"><h6>wwww</h6></template></ElementTest></div>
</template><script>
import ElementTest from './components/ElementTest.vue'export default {name: 'App',components: {ElementTest}
}
</script><style>
</style>

ElementTest.vue

<template><div id="app"><ElementTest><!-- 1. 组件标签中用template标签包裹需要渲染的内容，定义属性 slot = [slot标签的name名] --><template slot="first_slot"><h6>hhhh</h6></template><template slot="second_slot"><h6>wwww</h6></template></ElementTest></div>
</template><script>
import ElementTest from './components/ElementTest.vue'export default {name: 'App',components: {ElementTest}
}
</script><style>
</style>

3. 作用域插槽

引入：多个相同组件中显示的分类内容一样，但结构不同（第一个无序列表、第二个有序列表）

作用：可以给slot标签设 :自定义属性 = [要传的数据名]，从而将定义插槽的子组件的指定属性传给插槽的使用者App.vue中的定义的子组件标签对象，配合template，定义scope属性=[scope名]，通过 [scope名].[自定义属性] 在template中可以获取到传过来的参数值

App.vue

<template><div id="app"><ElementTest><!-- 1. 组件标签中用template标签包裹需要渲染的内容，定义属性 slot = [slot标签的name名] --><template scope="params"><template v-if="params.isOrder"><ol><li v-for="item in list" :key="item.id">{{item.name}}</li></ol></template><template v-else><ul><li v-for="item in list" :key="item.id">{{item.name}}</li></ul></template></template></ElementTest></div>
</template><script>
import ElementTest from './components/ElementTest.vue'export default {name: 'App',components: {ElementTest},data() {return {list: [{id: '001', name: '张三',age: 18},{id: '002', name: '李四', age: 19}]}}
}
</script><style>
</style>

ElementTest.vue

<template><div id="container">   <!-- isOrder的值传递给 ElementTest 组件对象 --><slot :isOrder="true"></slot><slot :isOrder="false"></slot></div>
</template><script>export default{		name: 'ElementTest',}
</script><style>
</style>