-
vue3 setup中defineEmits与defineProps的使用案例
目录
一、defineEmits的使用
使用说明
1、在子组件中调用defineEmits并定义要发射给父组件的方法const emits = defineEmits(['foldChange'])2、使用defineEmits会返回一个方法，使用一个变量emits(变量名随意)去接收
3、在子组件要触发的方法中，调用emits并传入发射给父组件的方法以及参数
emits('foldChange', isFold.value)1.子组件定义：
- <div class="nav-header">
- <el-icon size="25" class="fold-menu" @click="handleFoldClick">
- <component :is="`${isFold ? 'Fold' : 'Expand'}`">component>
- el-icon>
- 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.父组件接收使用：
- <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">Mainel-main>
- el-container>
- el-container>
- div>
- <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 子组件定义 方式一
- <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>
- <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 子组件定义 方式二
- <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>
- <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、父组件使用
- <showMessage
- :str="str"
- :num="num"
- :bool="bool"
- :arr="arr"
- :obj="obj"
- :date="date"
- :a = "a"
- :b="b"
- :getConsole="getConsole"
- id="abc"
- class="bcd"
- >showMessage>
- <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>
总结
好记性不如烂笔头，放了国庆八天假回来，看着代码好陌生...
-
相关阅读:
Vue样式属性绑定
Spring框架（六）：SpringTransaction事务的底层原理、xml配置和注解配置
Java.lang.Class类 getMethods()方法有什么功能呢？
Java中如何删除文件呢?
原型和原型链
SECS/GEM300协议通讯平台
一键同步，无处不在的书签体验：探索多电脑Chrome书签同步插件
Got a packet bigger than ‘max_allowed_packet‘ bytes_navicat_heidisql工具导入报错
c++基础（十四）——继承
一文教你在 centos7 下安装 Oracle19 C(完整版)
- 原文地址：https://blog.csdn.net/vanora1111/article/details/133697061
