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