五,VUE3.0使用（2）

登录页面已经完成了，那我们就来做一下首页吧

一, 组件的使用

1.在views文件夹下面新建index.ts文件

使用组件

<script setup> 范围里的值也能被直接作为自定义组件的标签名使用：

基本用法：

<template>
    <div class="index_class">
        <headers></headers>
    </div>
</template>
<script setup lang='ts'>
    
    import headers from '../../components/headers/headers.vue'
    
</script>

传参用法：

1.父组件向子组件传参，子组件接收

父组件传参：

<template>
    <div class="index_class">
        <cus-meun :data='meunList'></cus-meun>
    </div>
</template>
<script setup lang='ts'>
    import { reactive, onMounted } from "vue";
    import cusMeun from '../../components/cusMeun/cusMeun.vue'
    let meunList = reactive([])
    onMounted(() => {
        getMeunList()
    })
    const getMeunList = async () => {
        let data = await store.dispatch("common/menuList")
        meunList.push(...data)
    }
</script>

子组件接参：

<template>
  <div class="cus_meun">
  </div>
</template>

<script setup lang='ts'>
    import { ref,  reactive, watch} from "vue";
    const props = defineProps({
        data:{
            type:Array,
            default:()=>[]
        }
    })
    watch(()=> props.data,(news)=>{
        
    },{
        deep:true
    })
</script>

<style lang='scss' scoped>
    .cus_meun{
        width: 220px;
        min-height: calc(100vh - 80px);
        background: rgb(255, 255, 255);
    }
</style>

子组件向父组件传参，父组件接收

父组件接参：

<template>
  <div class="cus_meun">
      <template v-for='(item,index) in props.data'>
          <meun-item :dataList='item' :index='meunId' :getMeunId='getMeunId'></meun-item>
      </template>
  </div>
</template>

<script setup lang='ts'>
    import meunItem from './meunItem.vue'
    import { ref, toRef, reactive, watch } from "vue";
    const props = defineProps({
        data:{
            type:Array,
            default:()=>[]
        }
    })
   let meunId = ref(0)
    watch(()=> props.data,(news)=>{
        meunId.value = news[0].id
    },{
        deep:true
    })
    
    //父组件接到子组件传过来的参数
    const getMeunId = (id:any)=>{
       
        meunId.value = id
        console.log( meunId.value,'------')
    }
</script>

<style lang='scss' scoped>
    .cus_meun{
        width: 220px;
        min-height: calc(100vh - 80px);
        background: rgb(255, 255, 255);
    }
</style>

子组件向父组件传参：

<template>
  <div class="meun_item " :class="index==props.dataList.id?'meun_item_active':''" @click="openMenu()">
     
  </div>
 
</template>

<script lang='ts' setup>
    import { ref, toRefs, reactive,onMounted,watch } from "vue";
    // const { data }=  toRefs(props)
    const props = defineProps({
        dataList:{
            type:Object,
            default:()=>{}
        },
        index:{
            type:Number,
            default:0
        },
        getMeunId:{
            type:Function,
        }
    })
    let openArrow = ref(false)
    const openMenu = ()=>{
        //向父组件传参
        props.getMeunId(props.dataList.id)
        if(props.dataList.children){
            openArrow.value = !openArrow.value
        }
    }
</script>

index.vue:

<template>
    <div class="index_class">
        <headers></headers>
        <div class="content">
            <cus-meun :data='meunList'></cus-meun>
            <div class='right_content'>
                <div class='main_title'>
                    <div class='title_main'>
                        Demo Dashboard
                    </div>
                    <div class='sub_title'>
                        Welcome to Demo Admin!
                    </div>
                </div>
                <total-revenue></total-revenue>
                
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
    import { reactive, onMounted } from "vue";
    import headers from '../../components/headers/headers.vue'
    import cusMeun from '../../components/cusMeun/cusMeun.vue'
    import totalRevenue from '../components/totalRevenue.vue'
    import { useStore } from "vuex";
    const store = useStore();
    let meunList = reactive([])
    onMounted(() => {
        getMeunList()
    })
    const getMeunList = async () => {
        let data = await store.dispatch("common/menuList")
        meunList.push(...data)
    }
</script>

<style lang='scss' scoped>
    .index_class {
        min-width: 100%;
        height: 100vh;

        .content {
            max-width: 1260px;
            margin: 0 auto;
            display: flex;
            padding-top: 80px;
            margin-bottom: 35px;

        }

        .right_content {
            max-width: 1040px;

            .main_title {
                padding-left: 50px;
                padding-top: 40px;
                box-sizing: border-box;

                .title_main {
                    color: rgb(0, 0, 0);
                    font-family: Poppins;
                    font-size: 28px;
                    font-weight: 600;
                    line-height: 42px;
                    letter-spacing: 0%;
                    text-align: left;
                    margin-bottom: 6px;
                }

                .sub_title {
                    color: rgb(150, 155, 160);
                    font-family: Poppins;
                    font-size: 18px;
                    font-weight: 400;
                    line-height: 27px;
                    letter-spacing: 0%;
                    text-align: left;
                }
            }
        }
    }
</style>