您当前的位置:首页 > 前端 > vue > Vue3.0的新语法糖-script setup

Vue3.0的新语法糖-script setup

日期:2021-12-10 19:24:25    浏览:78

这个提案的主要目标是通过直接向模板公开 <script setup> 的上下文,减少在单文件组件(SFC)中使用 Composition API 的繁琐程度。

之前有一个关于 <script setup> ,目前已经实现(但被标记为实验性)。旧的提议选择了导出语法,这样代码就能与未使用的变量配合得很好。

这个提议采取了一个不同的方向,基于我们可以在 eslint-plugin-vue 中提供定制的 linter 规则的前提下。这使我们能够以最简洁的语法为目标。

<script setup>
  //syntax enabled
</script>
<script setup>
  import Foo from './Foo.vue'
  import MyComponent from './MyComponent.vue'
</script>

<template>
  <Foo />
  <!-- kebab-case also works -->
  <my-component />
</template>

props和emit的使用

<script setup>
import {defineProps,defineEmits} from "vue";

const props=defineProps({
  foo:String
})
const emit=defineEmits('update','delete')
</script>

Tags: vue js

世事无常

要有遥不可及的梦想,也要有脚踏实地的本事