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
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
8个非常实用的Vue自定义指令
Dec 15 Vue.js
vue使用require.context实现动态注册路由
Dec 25 Vue.js
vue使用过滤器格式化日期
Jan 20 Vue.js
vue基于Teleport实现Modal组件
May 31 Vue.js
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 Vue.js
vue el-table实现递归嵌套的示例代码
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
让你的网站首页自动选择语言转跳
2006/12/06 PHP
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
Javascript之文件操作
2007/03/07 Javascript
jQuery判断对象是否存在的方法
2015/02/05 Javascript
学习JavaScript设计模式(继承)
2015/11/26 Javascript
js实现常用排序算法
2016/08/09 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
自己封装的一个原生JS拖动方法(推荐)
2016/11/22 Javascript
JavaScript中for循环的几种写法与效率总结
2017/02/03 Javascript
BootStrap 导航条实例代码
2017/05/18 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
2017/06/12 Javascript
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
React Native 通告消息竖向轮播组件的封装
2020/08/25 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
详解Node.js中的Async和Await函数
2018/02/22 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
微信小程序按钮点击动画效果的实现
2019/09/04 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
[52:37]完美世界DOTA2联赛循环赛 Forest vs DM BO2第一场 10.29
2020/10/29 DOTA
Python异常学习笔记
2015/02/03 Python
Pycharm以root权限运行脚本的方法
2019/01/19 Python
pyqt5 QScrollArea设置在自定义侧(任何位置)
2019/09/25 Python
Python进程池Pool应用实例分析
2019/11/27 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
使用Python爬虫库requests发送表单数据和JSON数据
2020/01/25 Python
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
如何提高JDBC的性能
2013/04/30 面试题
Android面试题附答案
2014/12/08 面试题
机关单位动员会主持词
2014/03/20 职场文书
企业文化理念标语
2014/06/10 职场文书
社区助残日活动总结
2014/08/29 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
承诺函范文
2015/01/21 职场文书
MySQL表的增删改查(基础)
2021/04/05 MySQL
浅谈Node的内存泄露问题
2022/05/06 NodeJs
Python实现聚类K-means算法详解
2022/07/15 Python