vue组件开发频道菜单

App.vue

<template>
  <div style="width:250px;">
      <!-- 注册自定义事件@active -->
      <TitleMenu :isActive="select" @active="select= true">
        <template v-slot:title>
          <!-- 给具名插槽传递内容 -->
          发现插槽
        </template>
        <template v-slot:icon>></template>
      </TitleMenu>
  </div>
  
</template>

<script>
import TitleMenu from "./components/TitleMenu"
export default {
  components:{
    TitleMenu,
  },
  data(){
    return {
      select:false,
    }
  },
  
}
</script>

Item.vue

<template>  
    <div class="item"  :class="{active:isActive}" @click="handleClick">
        <!-- @click，给元素注册点击事件，此处表示点击的时候运行函数handleClick -->
        <!-- 插槽 -->
        <slot></slot>
    </div>
</template>

<script>
export default {
    props:{//单向数据流，prop传过来的东西是绝对不能改的,数据是谁的，谁才有权力控制，所以props里面的不能改，data里面的可以改
        isActive:{
        type:Boolean,//约束该属性的类型是Boolean
        //required:true,//约束该属性必须要传递
        default:false,
        }
    },
    methods:{
        handleClick(){
            //我知道发生了一点重要的事情，但我不知道该做什么，此时，应该通过抛出事件通知父组件,emit：发生、发出,参数（事件名，相关数据）
            this.$emit("active",123);
        },
    }
};
</script>

<style scoped>
.active{
    background: #e7e7e7;
}
.item {
    cursor: pointer;
    width: 100%;
    height: 100%; 
    /* 这个组件只是把外层填满，宽高交给外层 */
    transition:0.2s;
    /* css3的内容，动画过渡所需要的时间。 */
}
.item:hover {
    background: #f4f4f4;
}
</style>

TitleMenu.vue

<template>
    <div class="title-menu">
        <Item :isActive="isActive" @active="$emit('active')">
            <div class="inner">
                <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 {
    components:{
        Item,
    },
    props:{
        isActive:{
        type:Boolean,
        default:false,
        }
    },
}
</script>

<style scoped>
    .title-menu {
        width: 100%;
        height: 46px;
        line-height: 46px;/* 文字居中 */
    }
    .inner{
        padding: 0 20px;
    }
    .left{
        float: left;
        color:#212121;
        font-weight: 500;
        /* 文本粗细 */
    }
    .right{
        float:right;
        font-size: 12px;
        color:#999;
    }
</style>

父组件向子组件传数据props,子组件向父组件传事件event($emit