返回顶部
首页 > 资讯 > 精选 >vue3.0语法糖内的defineProps及defineEmits怎么用
  • 934
分享到

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

2023-06-30 02:06:46 934人浏览 泡泡鱼
摘要

这篇文章主要介绍“vue3.0语法糖内的defineProps及defineEmits怎么用”,在日常操作中,相信很多人在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怎么用”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

    --结束END--

    本文标题: vue3.0语法糖内的defineProps及defineEmits怎么用

    本文链接: https://lsjlt.com/news/327113.html(转载时请注明来源链接)

    有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

    猜你喜欢
    • vue3.0语法糖内的defineProps及defineEmits怎么用
      这篇文章主要介绍“vue3.0语法糖内的defineProps及defineEmits怎么用”,在日常操作中,相信很多人在vue3.0语法糖内的defineProps及defineEmits怎么用问题上存在疑惑,小编查阅了各式资料,整理出简...
      99+
      2023-06-30
    • vue3.0语法糖内的defineProps及defineEmits解析
      目录语法糖内的defineProps及defineEmits1、defineProps2、defineEmitsvue语法糖的说明语法糖内的defineProps及defineEmi...
      99+
      2024-04-02
    • 什么是语法糖?Vue3.2中怎么使用语法糖?
      3.计算属性我们一般使用计算属性来描述依赖响应式状态的复杂逻辑。说白了就是这个计算属性的值依赖于其他响应式属性的值,依赖的属性发生变化,那么这个计算属性的值就会进行重新计算。<script setup> import { ref...
      99+
      2022-11-28
      语法糖 Vue.js
    • Java中的语法糖有哪些及怎么使用
      本篇内容主要讲解“Java中的语法糖有哪些及怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Java中的语法糖有哪些及怎么使用”吧! Java中的语法糖...
      99+
      2024-04-02
    • es6语法糖怎么使用
      本篇内容主要讲解“es6语法糖怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“es6语法糖怎么使用”吧!es6语法糖有:1、对象字面量,是指以“{}”形式直接表示的对象;2、箭头函数,一种...
      99+
      2023-07-05
    • es6中语法糖Decorator怎么用
      这篇文章主要介绍了es6中语法糖Decorator怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。Decorator(修饰器/装饰器)是...
      99+
      2024-04-02
    • vue3更新的setup语法糖怎么用
      本文小编为大家详细介绍“vue3更新的setup语法糖怎么用”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue3更新的setup语法糖怎么用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。语法糖用法://&nb...
      99+
      2023-06-30
    • Vue3中的script setup语法糖怎么使用
      这篇文章主要介绍了Vue3中的script setup语法糖怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue3中的script setup语法糖怎么使用文章都会有所收获,下面我们一起来看看吧。scr...
      99+
      2023-07-04
    • Vue3怎么使用setup语法糖拒绝写return
      defineProps 代替props接收父组件传递的数据(父组件向子组件传参)父组件:<template> <div>父组件</div> <Child :title="msg&q...
      99+
      2023-05-14
      Vue3 return setup
    • 怎么在Vue3中使用<script lang=“ts“ setup>语法糖
      迁移组件以下组件有两个道具(要显示的和一个标志)。通过另一个组件,计算模板中显示的小马图像的URL,基于这两个道具。该组件还会在用户单击它时发出一个事件。The image selected while the Ponypony ...
      99+
      2023-05-16
      Vue3 setup
    • Vue3中的setup语法糖、computed函数、watch函数怎么使用
      这篇文章主要介绍“Vue3中的setup语法糖、computed函数、watch函数怎么使用”,在日常操作中,相信很多人在Vue3中的setup语法糖、computed函数、watch函数怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简...
      99+
      2023-07-05
    • javascript之generator生成器函数与asnyc/await语法糖怎么使用
      这篇文章主要讲解了“javascript之generator生成器函数与asnyc/await语法糖怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“javascript之generat...
      99+
      2023-07-05
    • update语法是什么及怎么使用
      UPDATE语法用于修改表中的数据。它的基本语法如下:```UPDATE table_nameSET column1 = value...
      99+
      2023-06-13
      update语法
    • velocity注释的语法是什么及怎么使用
      velocity的注释语法是以“#”开头的,可以使用单行注释和多行注释。单行注释:# 这是一个单行注释多行注释:#*这是一个多行注释...
      99+
      2023-06-12
      velocity注释
    • JavaScript基础语法有哪些及怎么用
      本篇内容主要讲解“JavaScript基础语法有哪些及怎么用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript基础语法有哪些及怎么用”吧!JavaScript 基本语法JS 与 ...
      99+
      2023-06-27
    • JS箭头函数的语法是什么及怎么使用
      本篇内容介绍了“JS箭头函数的语法是什么及怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!JavaScript的箭头函数随着ECMAS...
      99+
      2023-07-04
    • HDFS Balancer负载均衡器及语法怎么使用
      这篇文章主要介绍了HDFS Balancer负载均衡器及语法怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇HDFS Balancer负载均衡器及语法怎么使用文章都会有所收获,下面我们...
      99+
      2023-07-05
    • c语言中while语句的用法及规则是什么
      在C语言中,while语句用于创建一个循环,只要指定的条件为真,就会重复执行特定的代码块。while语句的一般格式如下:```whi...
      99+
      2023-09-15
      c语言
    • numpy.insert使用及内插插0的方法是什么
      本文小编为大家详细介绍“numpy.insert使用及内插插0的方法是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“numpy.insert使用及内插插0的方法是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知...
      99+
      2023-07-05
    • php的foreach语法怎么用
      本文小编为大家详细介绍“php的foreach语法怎么用”,内容详细,步骤清晰,细节处理妥当,希望这篇“php的foreach语法怎么用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。php中是有foreach语法...
      99+
      2023-06-26
    软考高级职称资格查询
    编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
    • 官方手机版

    • 微信公众号

    • 商务合作