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可视化库的完整步骤记录
Nov 18 Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
Vue如何实现验证码输入交互
Dec 07 Vue.js
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
Vue与React的区别和优势对比
Dec 18 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
vue实现倒计时功能
Mar 24 Vue.js
开发一个封装iframe的vue组件
Mar 29 Vue.js
vue实现可拖拽的dialog弹框
May 13 Vue.js
Vue的过滤器你真了解吗
Feb 24 Vue.js
vue自定义右键菜单之全局实现
Apr 09 Vue.js
vue3种table表格选项个数的控制方法
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
PHP操作xml代码
2010/06/17 PHP
PHP中类的继承和用法实例分析
2016/05/24 PHP
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
网页挂马方式整理及详细介绍
2016/11/03 Javascript
JavaScript中双符号的运算详解
2017/03/12 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
nodejs中密码加密处理操作详解
2018/03/20 NodeJs
Element-UI Table组件上添加列拖拽效果实现方法
2018/04/14 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
2018/10/16 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
2020/12/24 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
Python每天必学之bytes字节
2016/01/28 Python
Python Numpy 数组的初始化和基本操作
2018/03/13 Python
Python实现决策树C4.5算法的示例
2018/05/30 Python
Python Web编程之WSGI协议简介
2018/07/18 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
pandas中DataFrame修改index、columns名的方法示例
2019/08/02 Python
python实现局域网内实时通信代码
2019/12/22 Python
python脚本第一行如何写
2020/08/30 Python
基于Python爬取搜狐证券股票过程解析
2020/11/18 Python
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
银行实习的自我鉴定
2013/12/10 职场文书
2014年党员公开承诺书范文
2014/03/28 职场文书
婚前协议书范本
2014/04/15 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
运动会通讯稿300字
2015/07/20 职场文书
《颐和园》教学反思
2016/02/19 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
八年级作文之一起的走过日子
2019/09/17 职场文书
如何用PHP实现多线程编程
2021/05/26 PHP