插槽的简介？
插槽的概念 ：
- 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。
- 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。
一.默认插槽
父组件中的写法:
<template> <div> <Chacao> <div>这是父组件中的内容</div> </Chacao> </div> </template> <script> import Chacao from "@/components/chacao.vue"; export default { components: { Chacao, }, }; </script>
子组件中的写法:
<template> <div> <slot>插槽默认内容...</slot> </div> </template> <script> export default { } </script>
效果为：
二.具名插槽
具名插槽是根据名字显示位置的，在父组件中可以用 slot="名字"和v-slot:名字的方法来命名
而子组件用name=“父组件的名字”进行接受
父组件中的写法:
<template> <div> <Chacao> <template slot="center"> <div>这是父组件中的内容1</div> </template> <template v-slot:footer> <div>这是父组件中的内容2</div> </template> </Chacao> </div> </template> <script> import Chacao from "@/components/chacao.vue"; export default { components: { Chacao, }, }; </script>
子组件中的写法:
<template> <div> <slot name="center">插槽默认内容...</slot> <slot name="footer">插槽默认内容...</slot> </div> </template> <script> export default { } </script>
效果为：
三.作用域插槽
在子组件的插槽中带入参数（数据）提供给父组件使用，该参数（数据）仅在插槽内有效，父组件可以根据子组件中传过来的插槽参数（数据）对展示内容进行定制。
父组件中的写法:
<template> <div> <Chacao> <template slot-scope="scopeData"> <h4 v-for="g in scopeData.games" :key="g">{{ g }}</h4> </template> </Chacao> </div> </template> <script> import Chacao from "@/components/chacao.vue"; export default { components: { Chacao, }, }; </script>
子组件中的写法:
<template> <div> <slot :games="games"></slot> </div> </template> <script> export default { data() { return { games: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"], } }, }; </script>
效果为:
