vue3语法糖内的defineProps及defineEmits


Posted in Vue.js onApril 14, 2022

语法糖内的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"/>
Vue.js 相关文章推荐
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
Vue3实现简易音乐播放器组件
Aug 14 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 #Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 #Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 #Vue.js
vue elementUI表格控制对应列
Apr 13 #Vue.js
vue项目打包后路由错误的解决方法
Apr 13 #Vue.js
vue的项目如何打包上线
vue2的 router在使用过程中遇到的一些问题
Apr 13 #Vue.js
You might like
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
struts2 jquery 打造无限层次的树
2009/10/23 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
2014/04/04 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
2016/08/24 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
request请求获取参数的实现方法(post和get两种方式)
2016/09/27 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
2016/10/01 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
2016/11/22 Javascript
学习使用Bootstrap页面排版样式
2017/05/11 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
vue todo-list组件发布到npm上的方法
2018/04/04 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
2020/03/25 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
wxPython中文教程入门实例
2014/06/09 Python
python杀死一个线程的方法
2015/09/06 Python
Python进程间通信Queue实例解析
2018/01/25 Python
Python装饰器模式定义与用法分析
2018/08/06 Python
Python数据抓取爬虫代理防封IP方法
2018/12/23 Python
python获取本机所有IP地址的方法
2018/12/26 Python
在django view中给form传入参数的例子
2019/07/19 Python
Python流程控制 if else实现解析
2019/09/02 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
使用tensorboard可视化loss和acc的实例
2020/01/21 Python
如何用 Python 制作一个迷宫游戏
2021/02/25 Python
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
size?德国官方网站:英国伦敦的球鞋精品店
2018/03/17 全球购物
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
介绍一下gcc特性
2012/01/20 面试题
销售活动策划方案
2014/08/26 职场文书
2015年依法治校工作总结
2015/07/27 职场文书