vue3.0語(yǔ)法糖內(nèi)的defineProps及defineEmits解析
更新時(shí)間：2022年04月14日 11:23:06 作者：wangshan_aqi
這篇文章主要介紹了vue3.0語(yǔ)法糖內(nèi)的defineProps及defineEmits解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
語(yǔ)法糖內(nèi)的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專有聲明，無(wú)默認(rèn)值
// value: Number,
// theme?: String
// }>()
// 采用ts專有聲明，有默認(rèn)值
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>vue語(yǔ)法糖的說明
在Vue2.X的版本下一些標(biāo)簽可以省略化
語(yǔ)法糖是指在不影響功能的情況下 添加某種方法實(shí)現(xiàn)同樣的效果 從而方便程序開發(fā)。
Vue.js v-bind v-on 指令都提供了語(yǔ)法糖 也可以說是縮寫 比如 v-bind 可以省略 v-bind,
直接寫一個(gè)冒號(hào) "：”:
v-bind 可以省略為 xx:xx 如
<a ?v_bind:href="xx>連接</a> <a :href="xx">連接</a>
v_on 可以用 @來(lái)替代 如
<button v-on:click="xx"/> <button @:click="xx"/>
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue3 setup中defineEmits與defineProps的使用案例詳解
- vue3中defineEmits的使用舉例詳解
- 一文詳細(xì)聊聊vue3的defineProps、defineEmits和defineExpose
- vue3?setup語(yǔ)法糖之組件傳參(defineProps、defineEmits、defineExpose)示例詳解
- Vue3中defineEmits、defineProps?不用引入便直接用
- vue3中組件事件和defineEmits示例代碼
- vue3使用element-plus中el-table組件報(bào)錯(cuò)關(guān)鍵字'emitsOptions'與'insertBefore'分析
- vue3 組合式API defineEmits() 與 emits 組件選項(xiàng)詳解
相關(guān)文章
antd?Vue實(shí)現(xiàn)Login登錄頁(yè)面布局案例詳解?附帶驗(yàn)證碼驗(yàn)證功能
這篇文章主要介紹了antd?Vue實(shí)現(xiàn)Login登錄頁(yè)面布局案例詳解附帶驗(yàn)證碼驗(yàn)證功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-05-05
今天小編就為大家分享一篇解決element UI 自定義傳參的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-08-08
這篇文章主要介紹了vue3自定義hooks/可組合函數(shù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
本篇文章主要介紹了vuejs如何配置less，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-04-04
這篇文章主要介紹了Vue入口文件index.html緩存的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue前端左側(cè)菜單右側(cè)內(nèi)容的網(wǎng)站界面制作過程
這篇文章主要介紹了使用Vue和ElementUI制作一個(gè)帶有左側(cè)菜單和右側(cè)內(nèi)容區(qū)的網(wǎng)站頁(yè)面的過程,文中通過CSS樣式和深度作用符,實(shí)現(xiàn)了頁(yè)面的美化和功能的完善,需要的朋友可以參考下2025-02-02
VUE識(shí)別訪問設(shè)備是pc端還是移動(dòng)端的實(shí)現(xiàn)步驟
經(jīng)常在項(xiàng)目中會(huì)有支持pc與手機(jī)端需求,并且pc與手機(jī)端是兩個(gè)不一樣的頁(yè)面,這時(shí)就要求判斷設(shè)置,下面這篇文章主要給大家介紹了關(guān)于VUE識(shí)別訪問設(shè)備是pc端還是移動(dòng)端的相關(guān)資料,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了詳解Vue 實(shí)例中的生命周期鉤子，在Vue的整個(gè)生命周期中，它提供了一些生命周期鉤子，給了我們執(zhí)行自定義邏輯的機(jī)會(huì)。2017-03-03
今天小編就為大家分享一篇Vue 中對(duì)圖片地址進(jìn)行拼接的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-09-09
在vue中使用express-mock搭建mock服務(wù)的方法
這篇文章主要介紹了在vue中使用express-mock搭建mock服務(wù)的方法，文中給大家提到了在vue-test-utils 中 mock 全局對(duì)象的相關(guān)知識(shí) ,需要的朋友可以參考下2018-11-11