详解如何在Vue3使用＜script lang=“ts“ setup＞语法糖

更新时间：2022年06月13日 15:15:47 作者：南北极之间

本文主要介绍了在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＞语法糖的文章就介绍到这了,更多相关Vue3使用＜script lang=“ts“ setup＞内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue3
setup

vue-cli点击实现全屏功能
这篇文章主要为大家详细介绍了vue-cli点击实现全屏功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03
vue2 vue3中使用Echarts详细
这篇文章主要给大家介绍的是vue2 vue3中使用Echarts的相关资料，下面文章会详细介绍该内容，感兴趣的小伙伴不要错过哟
2021-09-09
使用vue打包进行云服务器上传的问题
这篇文章主要介绍了使用vue打包进行云服务器上传，本文给大家介绍的非常详细，对大家的工作或学习具有一定的参考借鉴价值,需要的朋友可以参考下
2020-03-03
vue/react项目刷新页面出现404报错的原因及解决办法
Vue项目打包部署到线上后,刷新页面会提示404,下面这篇文章主要给大家介绍了关于vue/react项目刷新页面出现404报错的原因及解决办法,文中将解决的办法介绍的很详细,需要的朋友可以参考下
2023-05-05
用Vue.js实现监听属性的变化
响应系统是Vue.js的一个显著功能，修改属性，可以更新视图，这让状态管理变得非常简单且直观。这篇文章主要给大家介绍如何利用Vue.js实现观察属性的变化，有需要的朋友们可以参考借鉴，感兴趣的朋友们下面来一起看看吧。
2016-11-11
vue3中provide和inject的使用
provide和inject在Vue 2中已经被广泛应用，不是新鲜API，3.0重新认识一下它们两个，本文重点给大家介绍vue3中provide和inject的使用，需要的朋友参考下吧
2021-07-07
Vue脚手架学习之项目创建方式
这篇文章主要给大家介绍了关于Vue脚手架学习之项目创建方式的相关资料，文中通过介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
Nuxt3项目中问题汇总之刷新页面useFetch无返回解决
Nuxt.js是一个基于 Vue.js 的服务端渲染应用框架,这篇文章主要给大家介绍了关于Nuxt3项目中问题汇总之刷新页面useFetch无返回解决办法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-03-03
基于Vue实现卡片无限滚动动画
这篇文章主要为大家详细介绍了如何利用Vue制作出卡片无限滚动动画，文中的示例代码讲解详细，对我们学习有一定帮助，需要的可以参考一下
2022-05-05
vue+element-ui+axios实现图片上传
这篇文章主要为大家详细介绍了vue+element-ui+axios实现图片上传，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-08-08