vue3.0语法糖内的defineProps及defineEmits解析
作者:wangshan_aqi 时间:2024-05-09 09:25:43
语法糖内的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"/>
来源:https://blog.csdn.net/wangshan_api/article/details/121765761
标签:vue,语法糖,defineProps,defineEmits
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
使用Python的Django和layim实现即时通讯的方法
2022-05-29 00:41:33
![](https://img.aspxhome.com/file/2023/0/77570_0s.jpg)
Centos7下使用yum安装mysql数据库的详细教程(增强版)
2024-01-13 17:24:52
Python Numpy教程之排序,搜索和计数详解
2021-10-31 05:30:21
一个css垂直水平居中布局,css效果
2008-11-03 11:40:00
python学习之panda数据分析核心支持库
2023-11-04 17:39:29
![](https://img.aspxhome.com/file/2023/0/115640_0s.png)
mysql备份脚本并保留7天
2024-01-13 03:10:34
![](https://img.aspxhome.com/file/2023/7/124487_0s.png)
动态产生XML文档的几种方式
2007-10-15 18:30:00
Windows Server 2019 MySQL数据库的安装与配置理论+远程连接篇
2024-01-18 21:19:56
![](https://img.aspxhome.com/file/2023/9/70379_0s.png)
Django+JS 实现点击头像即可更改头像的方法示例
2021-09-01 19:16:44
![](https://img.aspxhome.com/file/2023/3/117623_0s.png)
一篇文章了解Python中常见的序列化操作
2023-01-22 05:22:20
处理SQL Server 2000的命名实例和多实例
2009-01-19 13:28:00
Python动态演示旋转矩阵的作用详解
2022-08-21 02:35:15
![](https://img.aspxhome.com/file/2023/9/70079_0s.png)
pytorch:torch.mm()和torch.matmul()的使用
2022-05-25 21:32:40
SQL处理多级分类,查询结果呈树形结构
2012-08-21 10:50:12
浅谈django2.0 ForeignKey参数的变化
2022-03-26 10:11:30
微信小程序嵌入腾讯视频源过程详解
2024-04-18 10:10:25
Python+OpenCV实现图片及视频中选定区域颜色识别
2021-04-10 03:36:26
![](https://img.aspxhome.com/file/2023/1/112551_0s.jpg)
如何检测Oracle的ODBC是否连接成功?
2009-11-24 20:31:00
JavaScript点击按钮后弹出透明浮动层的方法
2023-08-05 22:33:29
asp超强的Server Application Error 的解决方法
2008-11-13 13:04:00