vue3 setup中defineEmits与defineProps的使用案例详解

const emits = defineEmits(['foldChange'])

 emits('foldChange', isFold.value)

<template>
  <div class="nav-header">
    <el-icon size="25" class="fold-menu" @click="handleFoldClick">
      <component :is="`${isFold ? 'Fold' : 'Expand'}`"></component>
    </el-icon>
    <!-- <el-icon><Fold /></el-icon> -->
    <!-- <Expand -->
  </div>
</template>
<script setup lang="ts">
import { ref, defineEmits } from 'vue'
// 定义发射给父组件的方法
const emits = defineEmits(['foldChange'])
const isFold = ref(false)
const handleFoldClick = () => {
  isFold.value = !isFold.value
  emits('foldChange', isFold.value)
}
</script>

<template>
  <div class="main">
    <el-container class="main-content">
      <el-aside :width="isCollapse ? '60px' : '210px'">
        <nav-menu :collapse="isCollapse"></nav-menu>
      </el-aside>
      <el-container class="page">
        <el-header class="page-header">
          <nav-header @foldChange="handleFoldChange"></nav-header>
        </el-header>
        <el-main class="page-content">Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
import NavMenu from '@/components/nav-menu'
import NavHeader from '@/components/nav-header'
import { ref } from 'vue'
const isCollapse = ref(false)
const handleFoldChange = (isFold: boolean) => {
  isCollapse.value = isFold
}
</script>

<template>
    <h3 v-bind="$attrs">字符串: {{props.str}}</h3>
    <h3>数字: {{props.num}}</h3>
    <h3>布尔: {{props.bool}}</h3>
    <h3>数组: {{props.arr}}</h3>
    <h3>对象: {{props.obj}}</h3>
    <h3>日期: {{props.date}}</h3>
    <h3>Symbol: {{props.a}} - {{props.b}}</h3>
</template>
<script setup>
    import { defineProps } from 'vue'
    const props = defineProps({
        str: String,
        num: Number,
        bool: Boolean,
        arr: Array,
        obj: Object,
        date: Date,
        getConsole: Function,
        message: Object,
        a: Symbol,
        b: Symbol
    })
    props.getConsole()
</script>

<template>
    <div class="shopList">
        <div class="shopContent" 
        :class="{tabActive: currentIndex === index }"
        v-for="(tab, index) in tabBars" :key="index"
        @click="itemClick(index)">
            {{tab.name}}
        </div>
    </div>
</template>
<script  setup>
    import { defineProps,ref,defineEmits } from 'vue'
    // 接受父组件传递的数据
    const props = defineProps({
        tabBar: {
            type: Array,
            default: () => []
        }
    })
    // 定义属性
    const currentIndex = ref(0)
    const tabBars = JSON.parse(JSON.stringify(props.tabBar))
    // 定义发射给父组件的方法
    const emits = defineEmits(['tabClick'])
    // tab点击的方法
    const itemClick = (e) => {
        currentIndex.value = e
        emits('tabClick', currentIndex.value)
    }
</script>
<style lang="scss" scoped>
.shopList {
    display: flex;
    justify-content: center;
    align-items: center;
    .shopContent {
        flex: 1;
        text-align: center;
        padding: 20px;
        cursor: pointer;
    }
    .tabActive {
        border-bottom: 3px solid #bf0706;
        color: #bf0706;
    }
}
</style>

<template>
        <showMessage
            :str="str"
            :num="num"
            :bool="bool"
            :arr="arr"
            :obj="obj"
            :date="date"
            :a = "a"
            :b="b"
            :getConsole="getConsole"
            id="abc"
            class="bcd"
        ></showMessage>
</template>
<script  setup>
import showMessage from './ShowMessage.vue'
    // 定义属性
    const str = '吃饭、睡觉、敲代码'
    const num =  100
    const bool = true
    const arr = ['apple', 'lemon', 'orange']
    const obj = {
                name: 'coderXiao',
                age: 18
            }
    const date = new Date()
    const a = Symbol('好好学习')
    const b = Symbol('天天向上')
    // 定义方法
    const getConsole = () => {
         console.log('传递给子组件的方法');
    }
</script>
<style lang="scss" scoped>
</style>