vue3.0 语法糖内的defineProps及defineEmits

最新推荐文章于 2025-10-26 16:58:00 发布

原创最新推荐文章于 2025-10-26 16:58:00 发布 · 3.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #typescript #vue.js

笔记专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了Vue3中用于组件属性定义的defineProps和事件发射的defineEmits。通过示例代码展示了如何使用typescript进行类型定义，包括设置默认值、非typescript声明方式等。同时，文章解释了子组件如何通过defineEmits向父组件传递事件，包括非typescript声明和typescript专用声明方式。这些内容有助于开发者更好地理解和应用Vue3的组件通信机制。

标题vue3：语法糖内的defineProps及defineEmits

1、defineProps

获取组件传值

<div :style="fontstyle">
        <div class="rate" @mouseout="mouseOut">
            <span  @mouseover="mouseOver(num)" v-for="num in 5" :key="num">☆</span>
            <!-- <span class="hollow" :style="fontWidth">
                <span @mouseover="mouseOver(num)" v-for="num in 5" :key="num">★</span>
            </span> -->
            <span class="hollow" :style="fontWidth">
                <span @click="onRate(num)" @mouseover="mouseOver(num)" v-for="num in 5" :key="num">★</span>
            </span>
        </div>
    </div>
    <script setup lang="ts">
 import { defineProps, defineEmits, computed, ref } from "vue"

// defineProps<{ // 采用ts专有声明，无默认值
// value: Number,
// theme?: String
// }>()

// 采用ts专有声明，有默认值
interface Props {
    value: number
    theme: string
}
const props = withDefaults(defineProps<Props>(), {
    value: 0,
    theme: 'blue'
})

// 非ts专有声明
// let props = defineProps({ 
//     value: Number,
//     theme: {
//         type: String,
//         default: 'blue'
//     }
// })

let width = ref(props.value)

function mouseOver(i: number) {
    width.value = i
}

function mouseOut() {
    width.value = props.value
}
const fontWidth = computed(() => `width: ${width.value}em;`)
const themeObj: { [key: string]: string } = { 'black': '#000', 'white': '#f80', 'red': '#f5222d', 'orange': '#8f0', 'yellow': '#80f', 'green': '#0f6', 'blue': '#08f',}
const fontstyle = computed(() => `color: ${themeObj[props.theme]};`)
</script>

<style>
.rate {
    position: relative;
    display: inline-block;
}
.rate > span.hollow {
    position: absolute;
    display: inline-block;
    top: 0;
    left: 0;
    width: 0;
    overflow: hidden;
}
</style>

2、defineEmits

子组件向父组件事件传递

<template>
    <div :style="fontstyle">
        <div class="rate" @mouseout="mouseOut">
            <span  @mouseover="mouseOver(num)" v-for="num in 5" :key="num">☆</span>
            <!-- <span class="hollow" :style="fontWidth">
                <span @mouseover="mouseOver(num)" v-for="num in 5" :key="num">★</span>
            </span> -->
            <span class="hollow" :style="fontWidth">
                <span @click="onRate(num)" @mouseover="mouseOver(num)" v-for="num in 5" :key="num">★</span>
            </span>
        </div>
    </div>
</template>
<script setup lang="ts">
 import { defineProps, defineEmits, computed, ref } from "vue"
***同上代码省略
// 非ts声明
// let emits = defineEmits(['update-rate'])
// function onRate(num) {
//    emits('update-rate', num)
// }
// 采用ts专有声明，
let emits = defineEmits<{(e: 'update-rate', num: number): void}>()
function onRate(num: number) {
    emits('update-rate', num)
}
</script>

<style>
// 同上代码
</style>