vue3.0語法糖內的defineProps及defineEmits怎么用

這篇文章主要介紹“vue3.0語法糖內的defineProps及defineEmits怎么用”，在日常操作中，相信很多人在vue3.0語法糖內的defineProps及defineEmits怎么用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue3.0語法糖內的defineProps及defineEmits怎么用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

語法糖內的defineProps及defineEmits

1、defineProps

獲取組件傳值

<div :>
        <div class="rate" @mouseout="mouseOut">
            <span  @mouseover="mouseOver(num)" v-for="num in 5" :key="num">☆</span>
            <!-- <span class="hollow" :>
                <span @mouseover="mouseOver(num)" v-for="num in 5" :key="num">★</span>
            </span> -->
            <span class="hollow" :>
                <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 :>
        <div class="rate" @mouseout="mouseOut">
            <span  @mouseover="mouseOver(num)" v-for="num in 5" :key="num">☆</span>
            <!-- <span class="hollow" :>
                <span @mouseover="mouseOver(num)" v-for="num in 5" :key="num">★</span>
            </span> -->
            <span class="hollow" :>
                <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>

vue語法糖的說明

在Vue2.X的版本下一些標簽可以省略化 

語法糖是指在不影響功能的情況下 添加某種方法實現同樣的效果 從而方便程序開發。

Vue.js  v-bind v-on 指令都提供了語法糖 也可以說是縮寫 比如 v-bind 可以省略 v-bind,

直接寫一個冒號 "：”:

v-bind 可以省略為  xx:xx 如

<a  v_bind:href="xx>連接</a>
<a :href="xx">連接</a>

v_on 可以用 @來替代  如

<button v-on:click="xx"/>
<button @:click="xx"/>

到此，關于“vue3.0語法糖內的defineProps及defineEmits怎么用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！