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中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
vue3.0实现插件封装
Dec 14 Vue.js
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
Vue实现多页签组件
Jan 14 Vue.js
如何让vue长列表快速加载
Mar 29 Vue.js
vue实现简单数据双向绑定
Apr 28 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
深入理解Vue的数据响应式
May 15 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
解决vue-router的beforeRouteUpdate不能触发
Apr 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
11个PHP 分页脚本推荐
2011/08/15 PHP
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
PHP四舍五入、取整、round函数使用示例
2015/02/06 PHP
php使用curl通过代理获取数据的实现方法
2016/05/16 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
基于jQuery的日期选择控件
2009/10/27 Javascript
基于MooTools的很有创意的滚动条时钟动画
2010/11/14 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
如何在MVC应用程序中使用Jquery
2014/11/17 Javascript
input 禁止输入特殊字符的四种实现方式
2016/08/24 Javascript
Vee-Validate的使用方法详解
2017/09/22 Javascript
浅析JS中什么是自定义react数据验证组件
2018/10/19 Javascript
vue中的ref和$refs的使用
2018/11/22 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
2019/02/10 Javascript
js核心基础之闭包的应用实例分析
2019/05/11 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
2019/12/04 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
[04:40]2016国际邀请赛中国区预选赛全程TOP10镜头集锦
2016/07/01 DOTA
使用Protocol Buffers的C语言拓展提速Python程序的示例
2015/04/16 Python
Python的面向对象编程方式学习笔记
2016/07/12 Python
详解Python 序列化Serialize 和 反序列化Deserialize
2017/08/20 Python
Django中的Model操作表的实现
2018/07/24 Python
python random从集合中随机选择元素的方法
2019/01/23 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
Python Multiprocessing多进程 使用tqdm显示进度条的实现
2019/08/13 Python
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
Foot Locker英国官网:美国知名运动产品零售商
2019/02/21 全球购物
财务人员个人自荐信范文
2013/09/26 职场文书
中职生自我鉴定范文
2013/10/03 职场文书
分公司经理岗位职责
2013/11/11 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
五一劳动节慰问信
2015/02/14 职场文书
大学生个人年度总结范文
2015/02/15 职场文书
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server
浅谈redis整数集为什么不能降级
2021/07/25 Redis
Redis监控工具RedisInsight安装与使用
2022/03/21 Redis