vue组件-属性及插槽

alice--小文子 2022-09-23 09:32:14 阅读数:509

vue组件属性插槽

1 item.vue:(子组件)

<template>
<div class="item" :class={active:isActive} @click="handleClick">
<slot></slot>
</div>
</template>
<script>
export default {
props:{
isActive:{
type:Boolean,//约束该属性的类型为Boolean
required:true,//约束该属性必须要传递
}
},
methods:{
handleClick(){
this.$emit("active");
}
}
}
</script>
<style scoped>
.item{
cursor:pointer;
width:100%;
height:100%;
}
.item:hover{
background:#d6d4d4;
transition:1s;/* 样式在一秒内完成 */
}
.active{
background:#e7e7e7;
}
</style>

2 TitleMenu.vue:(父组件)

<template>
<div class="menu-title"><!--具名插槽-->
<Item :isActive="isActive" @active="$emit('active')">
<div class="item-list">
<div class="left">
<slot name= "title">
</slot>
</div>
<div class="right">
<slot name="icon"></slot>
</div>
</div>
</Item>
</div>
</template>
<script>
import Item from "./item"
export default {
props:{
isActive:{
type:Boolean,
default:false
}
},
components:{
Item
}
}
</script>
<style>
.menu-title{
width:100%;
height:46px;
line-height:46px;
}
.item-list{
padding:0 20px;
}
.left{
float:left;
color:#212121;
font-size:16px;
}
.right{
float:right;
font-size:12px;
color:#999;
}
</style>

3.App.vue:

<template>
<div>
<TitleMenu :isActive="select" @active="select = true">
<template v-slot:title>
<!--给title具名插槽传递内容-->
发现频道
</template>
<template v-slot:icon>
>
</template>
</TitleMenu>
</div>
</template>
<script>
import TitleMenu from "./components/TitleMenu";
export default{
components:{
TitleMenu,
},
data(){
return{
select:false
}
},
methods:{
}
}
</script>
<style scoped>
</style>

版权声明:本文为[alice--小文子]所创,转载请带上原文链接,感谢。 https://blog.csdn.net/alice9999999/article/details/119204070