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.valueemits('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 = eemits('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、父组件使用

<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 =  100const bool = trueconst 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>