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>