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

这篇“如何在Vue3中使用＜script lang=“ts“ setup＞语法糖”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“如何在Vue3中使用＜script lang=“ts“ setup＞语法糖”文章吧。

迁移组件

以下组件有两个道具（要显示的和一个标志）。通过另一个组件，计算模板中显示的小马图像的URL，基于这两个道具。该组件还会在用户单击它时发出一个事件。The image selected while the Ponypony Model is running.

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>

隐式返回

删除末尾的顶级绑定声明和导入语句会自动让它们在模板中变得使用可用。所以这里和可用，无需返回它们。When the pony image is clicked, the script will return.

这句话可以重写为：“我们可以仅通过导入组件，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 作为 Props 的类型时，是否需要指定具体的类型？"

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

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

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

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

defineEmits

Vue 提供了一个帮助程序，与帮助程序非常相似。这句话已经很清晰地表达了一个函数和其相应的操作，因此很难用单独一个句子来重写。但如果必须要重写，可以尝试以下几种方式： 1. 这些函数用于定义和触发事件。 2. defineEmits, defineProps 和 defineEmitsemit 函数都与事件有关。 3. 如果你需要定义、设置和触发事件，可以使用 defineEmits、defineProps 和 defineEmitsemit 函数。 4. 这几个函数可以帮助你在 Vue.js 中管理事件

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）。当函数被定义为 XX 时，所有函数返回的内容在父组件 YY 中也是可见的。如果 用 定义，则父组件不可见。 可以通过添加助手来选择暴露的内容。然后，公开的将作为 访问。PonyImageImagedefineComponentsetupPonyImagescript setupImagedefineExpose({ key: value })valuekey

以上就是关于“如何在Vue3中使用＜script lang=“ts“ setup＞语法糖”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。