Vue插槽
插槽:形象的说就是挖个坑,等着组件的使用者进行填充一、作用让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于父组件===>子组件二、分类vue的插槽有三种:分别是默认插槽、具名插槽、作用域插槽三、使用方式(1)默认插槽父组件中:<Category><div>html结构</div></Category>子组件中:&l
·
插槽:形象的说就是挖个坑,等着组件的使用者进行填充
一、作用
让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于父组件===>子组件
二、分类
vue的插槽有三种:分别是默认插槽、具名插槽、作用域插槽
三、使用方式
(1)默认插槽
父组件中:
<Category>
<div>html结构</div>
</Category>
子组件中:
<template>
<div>
<!--定义插槽-->
<slot>插槽默认内容</slot>
</div>
</template>
(2)具名插槽
父组件中:
<Category>
<template slot='center'>
<div>html结构1</div>
</template>
<template v-slot:footer>
<div>html结构2</div>
</template>
</Category>
子组件中:
<template>
<div>
<slot name='center'>插槽默认内容</slot>
<slot name='footer'>插槽默认内容</slot>
</div>
</template>
(3)作用域插槽
1.理解:数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。(games数据在Category组件中,但使用数据所遍历出来的机构由App组件决定)
2.具体编码:
父组件中:
<Category>
<template slot='scpeData'>
<!--生成的ul列表-->
<ul>
<li v-for='(m,index) in scpeData.games' :key='index'>{{m}}</li>
</ul>
</template>
</Category>
<Category>
<template slot='scpeData'>
<!--生成的ol列表-->
<ol>
<li v-for='(m,index) in scpeData.games' :key='index'>{{m}}</li>
</ol>
</template>
</Category>
子组件中:
<template>
<div>
<slot :games='games'>插槽默认内容</slot>
</div>
</template>
<script>
export default {
name:'CategoryC',
props:['title'],
data(){
return {
games:['火锅','烧烤','小龙虾','牛排'],
}
}
}
</script>
更多推荐
已为社区贡献2条内容
所有评论(0)