您好,登錄后才能下訂單哦!
這篇文章主要介紹“vue3.0語法糖內(nèi)的defineProps及defineEmits怎么用”,在日常操作中,相信很多人在vue3.0語法糖內(nèi)的defineProps及defineEmits怎么用問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”vue3.0語法糖內(nèi)的defineProps及defineEmits怎么用”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
獲取組件傳值
<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專有聲明,無默認(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>
子組件向父組件事件傳遞<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>
在Vue2.X的版本下一些標(biāo)簽可以省略化
語法糖是指在不影響功能的情況下 添加某種方法實(shí)現(xiàn)同樣的效果 從而方便程序開發(fā)。
Vue.js v-bind v-on 指令都提供了語法糖 也可以說是縮寫 比如 v-bind 可以省略 v-bind,
直接寫一個(gè)冒號 ":”:
v-bind 可以省略為 xx:xx 如
<a v_bind:href="xx>連接</a> <a :href="xx">連接</a>
v_on 可以用 @來替代 如
<button v-on:click="xx"/> <button @:click="xx"/>
到此,關(guān)于“vue3.0語法糖內(nèi)的defineProps及defineEmits怎么用”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。