vue3.0语法糖内的defineProps及defineEmits怎么用

这篇文章主要介绍“vue3.0语法糖内的defineProps及defineEmits怎么用”，在日常操作中，相信很多人在Vue3.0语法糖内的defineProps及defineEmits怎么用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue3.0语法糖内的defineProps及defineEmits怎么用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

语法糖内的defineProps及defineEmits

1、defineProps

获取组件传值

<div :>        <div class="rate" @mouseout="mouseOut">            <span  @mouseover="mouseOver(num)" v-for="num in 5" :key="num">☆</span>            <!-- <span class="hollow" :>                <span @mouseover="mouseOver(num)" v-for="num in 5" :key="num">★</span>            </span> -->            <span class="hollow" :>                <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 :>        <div class="rate" @mouseout="mouseOut">            <span  @mouseover="mouseOver(num)" v-for="num in 5" :key="num">☆</span>            <!-- <span class="hollow" :>                <span @mouseover="mouseOver(num)" v-for="num in 5" :key="num">★</span>            </span> -->            <span class="hollow" :>                <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"/>

到此，关于“vue3.0语法糖内的defineProps及defineEmits怎么用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！