温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么在Vue3中使用<script lang=“ts“ setup>语法糖

发布时间:2022-06-13 17:12:53 来源:亿速云 阅读:2253 作者:iii 栏目:开发技术

这篇文章主要介绍“怎么在Vue3中使用<script lang=“ts“ setup>语法糖”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“怎么在Vue3中使用<script lang=“ts“ setup>语法糖”文章能帮助大家解决问题。

迁移组件

以下组件有两个道具(要显示的和一个标志)。基于这两个道具,计算模板中显示的小马图像的URL(通过另一个组件)。该组件还会在用户单击它时发出一个事件。PonyponyModelisRunningImageselected

Pony.vue

<template>
  <figure @click="clicked()">
    <Image :src="ponyImageUrl" :alt="ponyModel.name" />
    <figcaption>{{ ponyModel.name }}</figcaption>
  </figure>
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue';
import Image from './Image.vue';
import { PonyModel } from '@/models/PonyModel';
 
export default defineComponent({
  components: { Image },
 
  props: {
    ponyModel: {
      type: Object as PropType<PonyModel>,
      required: true
    },
    isRunning: {
      type: Boolean,
      default: false
    }
  },
 
  emits: {
    selected: () => true
  },
 
  setup(props, { emit }) {
    const ponyImageUrl = computed(() => `/pony-${props.ponyModel.color}${props.isRunning ? '-running' : ''}.gif`);
 
    function clicked() {
      emit('selected');
    }
 
    return { ponyImageUrl, clicked };
  }
});
</script>

第一步,将属性添加到元素中。然后,我们只需要保留函数的内容:所有的样板都可以消失。您可以删除 和 中的函数:setupscriptsetupdefineComponentsetupscript

Pony.vue

<script setup lang="ts">
import { computed, PropType } from 'vue';
import Image from './Image.vue';
import { PonyModel } from '@/models/PonyModel';
 
components: { Image },
 
props: {
  ponyModel: {
    type: Object as PropType<PonyModel>,
    required: true
  },
  isRunning: {
    type: Boolean,
    default: false
  }
},
 
emits: {
  selected: () => true
},
 
const ponyImageUrl = computed(() => `/pony-${props.ponyModel.color}${props.isRunning ? '-running' : ''}.gif`);
 
function clicked() {
  emit('selected');
}
 
return { ponyImageUrl, clicked };
</script>

隐式返回

我们还可以删除末尾的:在模板中声明的所有顶级绑定(以及所有导入)都自动可用。所以这里和可用,无需返回它们。returnscript setupponyImageUrlclicked

声明也是如此!导入组件就足够了,Vue 知道它在模板中使用:我们可以删除声明。componentsImagecomponents

Pony.vue

<script setup lang="ts">
import { computed, PropType } from 'vue';
import Image from './Image.vue';
import { PonyModel } from '@/models/PonyModel';
 
props: {
  ponyModel: {
    type: Object as PropType<PonyModel>,
    required: true
  },
  isRunning: {
    type: Boolean,
    default: false
  }
},
 
emits: {
  selected: () => true
},
 
const ponyImageUrl = computed(() => `/pony-${props.ponyModel.color}${props.isRunning ? '-running' : ''}.gif`);
 
function clicked() {
  emit('selected');
}
</script>

我们差不多做到了:我们现在需要迁移 和 声明。propsemits

defineProps

Vue 提供了一个助手,你可以用它来定义你的道具。它是一个编译时帮助程序(一个宏),所以你不需要在代码中导入它:Vue 在编译组件时会自动理解它。defineProps

defineProps返回道具:

const props = defineProps({
  ponyModel: {
    type: Object as PropType<PonyModel>,
    required: true
  },
  isRunning: {
    type: Boolean,
    default: false
  }
});

defineProps将前一个声明作为参数接收。但是我们可以为TypeScript用户做得更好!props

defineProps是一般类型化的:你可以在没有参数的情况下调用它,但指定一个接口作为道具的“形状”。没有更可怕的写!我们可以使用正确的 TypeScript 类型,并添加以将 prop 标记为不需要 ???? 。Object as PropType<Something>?

const props = defineProps<{
  ponyModel: PonyModel;
  isRunning?: boolean;
}>();

不过我们丢失了一些信息。在以前的版本中,我们可以指定其默认值为 .为了具有相同的行为,我们可以使用帮助程序:isRunningfalsewithDefaults

interface Props {
  ponyModel: PonyModel;
  isRunning?: boolean;
}
 
const props = withDefaults(defineProps<Props>(), { isRunning: false });

要迁移的最后一个剩余语法是声明。emits

defineEmits

Vue 提供了一个帮助程序,与帮助程序非常相似。 返回函数:defineEmitsdefinePropsdefineEmitsemit

const emit = defineEmits({
  selected: () => true
});

或者更好的是,使用TypeScript:

const emit = defineEmits<{
  (e: 'selected'): void;
}>();

完整组件声明缩短了 10 行。对于~30行组件来说,这不是一个糟糕的减少!它更容易阅读,并且与TypeScript配合得更好。让所有内容自动暴露到模板中确实感觉有点奇怪,但是没有写回车符,但是您已经习惯了。

Pony.vue

<template>
  <figure @click="clicked()">
    <Image :src="ponyImageUrl" :alt="ponyModel.name" />
    <figcaption>{{ ponyModel.name }}</figcaption>
  </figure>
</template>
 
<script setup lang="ts">
import { computed } from 'vue';
import Image from './Image.vue';
import { PonyModel } from '@/models/PonyModel';
 
interface Props {
  ponyModel: PonyModel;
  isRunning?: boolean;
}
 
const props = withDefaults(defineProps<Props>(), { isRunning: false });
 
const emit = defineEmits<{
  (e: 'selected'): void;
}>();
 
const ponyImageUrl = computed(() => `/pony-${props.ponyModel.color}${props.isRunning ? '-running' : ''}.gif`);
 
function clicked() {
  emit('selected');
}
</script>

默认关闭和defineExpose

声明组件的两种方法之间有一个更细微的区别:组件是“默认关闭的”。这意味着其他组件看不到组件内部定义的内容。script setup

例如,组件可以访问该组件(通过使用 refs,我们将在下一章中看到)。如果定义为 ,则函数返回的所有内容对于父组件 () 也是可见的。如果 用 定义,则父组件不可见。 可以通过添加助手来选择暴露的内容。然后,公开的将作为 访问。PonyImageImagedefineComponentsetupPonyImagescript setupImagedefineExpose({ key: value })valuekey

关于“怎么在Vue3中使用<script lang=“ts“ setup>语法糖”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI