vue3.0语法糖内的defineProps及defineEmits解析
短信预约 -IT技能 免费直播动态提醒
语法糖内的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>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"/>以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
