vue3 setup中defineEmits与defineProps的使用案例

一、defineEmits的使用

二、 defineProps的使用

总结

一、defineEmits的使用

使用说明
1、在子组件中调用defineEmits并定义要发射给父组件的方法

const emits = defineEmits(['foldChange'])

2、使用defineEmits会返回一个方法，使用一个变量emits(变量名随意)去接收

3、在子组件要触发的方法中，调用emits并传入发射给父组件的方法以及参数

 emits('foldChange', isFold.value)

1.子组件定义：

<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>

2.父组件接收使用：

<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>

二、 defineProps的使用

使用说明
1、在父组件中定义String、Number、Boolean、Array、Object、Date、Function、Symbol这些类型的数据
2、在子组件中通过defineProps API来进行接受
3、通过子组件事件修改变量值，同时将值传递给父组件，对父组件的变量进行赋值
4、向子组件传递非props的属性，用法及效果如下

1.1 子组件定义方式一

<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>

1.2 子组件定义方式二

<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>

2、父组件使用

javascript"><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>