这篇文章主要介绍“vue3.0语法糖内的defineProps及defineEmits怎么用”,在日常操作中,相信很多人在Vue3.0语法糖内的defineProps及defineEmits怎么用问题上存在疑惑,小编查阅了各式资料,整理出简
这篇文章主要介绍“vue3.0语法糖内的defineProps及defineEmits怎么用”,在日常操作中,相信很多人在Vue3.0语法糖内的defineProps及defineEmits怎么用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue3.0语法糖内的defineProps及defineEmits怎么用”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
获取组件传值
<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>
子组件向父组件事件传递<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>
在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
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0