vue 插槽
1、作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间的通信方式,适用于父组件==》子组件
2、分类:默认插槽、具名插槽、作用域插槽
3、使用方式:
(1)、默认插槽
父组件中: <Category> <div>html结构 </div> </Category>
子组件中: <template> <div> <!-- 定义插槽 --> <slot>插槽默认内容...</slot> </div> </template>
(2)、具名插槽
父组件中: <Category> <!-- 写法一 --> <template slot="center"> <div>html结构 </div> </template> <!-- 写法二 --> <template v-slot:footer> <div>html结构 </div> </template> </Category> 子组件中: <template> <div> <!-- 定义插槽 --> <slot name="center">插槽默认内容...</slot> <slot name="footer">插槽默认内容...</slot> </div> </template>
3、作用域插槽
(1)理解:数据在组件自身,但是根据数据生成的结构需要组件使用者来决定。(games数据在Category组件中,但是使用数据所遍历出来的结构由App组件决定,比如:elementUI的表格scope)
(2)具体编码:
父组件中: <Category> <template scope="scopeData"> <ul> <li v-for="g in scopeData.games" :key="g">{{ g }}</li> </ul> </template> </Category> <Category> <template slot-scope="scopeData"> <h4 v-for="g in scopeData.games" :key="g">{{ g }}</h4> </template> </Category> 子组件中: <template> <div> <!-- 定义插槽 games是子组件data中的数据--> <slot :games="games">插槽默认内容...</slot> </div> </template>