快捷導(dǎo)航

vue3 setup中defineEmits與defineProps的使用案例詳解

更新時(shí)間：2023年10月11日 14:09:25 作者：vanora1111

在父組件中定義String、Number、Boolean、Array、Object、Date、Function、Symbol這些類(lèi)型的數(shù)據(jù),使用defineEmits會(huì)返回一個(gè)方法,使用一個(gè)變量emits(變量名隨意)去接收,本文給大家介紹vue3 setup中defineEmits與defineProps的使用案例,感興趣的朋友一起看看吧

一、defineEmits的使用

使用說(shuō)明
1、在子組件中調(diào)用defineEmits并定義要發(fā)射給父組件的方法

const emits = defineEmits(['foldChange'])

2、使用defineEmits會(huì)返回一個(gè)方法，使用一個(gè)變量emits(變量名隨意)去接收

3、在子組件要觸發(fā)的方法中，調(diào)用emits并傳入發(fā)射給父組件的方法以及參數(shù)

 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'
// 定義發(fā)射給父組件的方法
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的使用

使用說(shuō)明
1、在父組件中定義String、Number、Boolean、Array、Object、Date、Function、Symbol這些類(lèi)型的數(shù)據(jù)
2、在子組件中通過(guò)defineProps API來(lái)進(jìn)行接受
3、通過(guò)子組件事件修改變量值，同時(shí)將值傳遞給父組件，對(duì)父組件的變量進(jìn)行賦值
4、向子組件傳遞非props的屬性，用法及效果如下

1.1 子組件定義方式一

<template>
    <h3 v-bind="$attrs">字符串: {{props.str}}</h3>
    <h3>數(shù)字: {{props.num}}</h3>
    <h3>布爾: {{props.bool}}</h3>
    <h3>數(shù)組: {{props.arr}}</h3>
    <h3>對(duì)象: {{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'
    // 接受父組件傳遞的數(shù)據(jù)
    const props = defineProps({
        tabBar: {
            type: Array,
            default: () => []
        }
    })
    // 定義屬性
    const currentIndex = ref(0)
    const tabBars = JSON.parse(JSON.stringify(props.tabBar))
    // 定義發(fā)射給父組件的方法
    const emits = defineEmits(['tabClick'])
    // tab點(diǎn)擊的方法
    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、父組件使用

<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 = '吃飯、睡覺(jué)、敲代碼'
    const num =  100
    const bool = true
    const arr = ['apple', 'lemon', 'orange']
    const obj = {
                name: 'coderXiao',
                age: 18
            }
    const date = new Date()
    const a = Symbol('好好學(xué)習(xí)')
    const b = Symbol('天天向上')
    // 定義方法
    const getConsole = () => {
         console.log('傳遞給子組件的方法');
    }
</script>
<style lang="scss" scoped>
</style>

總結(jié)

到此這篇關(guān)于vue3 setup中defineEmits與defineProps的使用案例的文章就介紹到這了,更多相關(guān)vue3 setup defineEmits與defineProps內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: