|
前言在vue中，sfc(单文件组件)指的是文件后缀名为.vue的特殊文件格式，它允许将 Vue 组件中的模板、逻辑 与 样式封装在单个文件中。 以下是一个基本的sfc <script>export default { data() { return { greeting: 'Hello World!' } }}</script><template> <p class="greeting">{{ greeting }}</p></template><style>.greeting { color: red; font-weight: bold;}</style>vue3.0在最新的sfc提案中推出了setup的写法，下面让我们来看看，新的提案都有哪些变化。
标准的sfc写法
在使用TS的情况下，标准的sfc需要借助defineComponent来进行类型推断。 <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ setup() { return { // 暴露给template的属性 } } })</script>
script-setup
script setup的推出，目的是为了让开发者更高效率的开发组件，减少样板内容，减轻开发负担。仅仅需要给script标签添加一个setup属性，就能将script变成setup函数，同时定义的变量，函数，导入的组件都会默认暴露给模板。
变量暴露标准的写法 <script>import { defineComponent, ref} from 'vue'export default defineComponent({ setup() { const count = ref(0) return { count } }})</script><template> <div> parent{{count}} </div></template>setup 写法 <script setup lang="ts">import {ref} from 'vue' const count = ref(0)</script><template> <div> parent{{count}} </div></template>
组件挂载标准的写法 <script lang="ts">import { defineComponent } from 'vue'import child from './childComponent'export default defineComponent({ components: { child }, setup() { // ... }})</script><template> <div> parent <child /> </div></template>setup 写法 <script setup lang="ts">import child from './childComponent'</script><template> <div> parent <child /> </div></template> 无需再手动挂载组件，即可在模板中使用，高效快捷。 其他的变量，以及顶级API，比如compute、watch等属性，和原来的标准写法一样。
props
在setup中，子组件在接收props时，需要借助defineProps，这是一个只能在setup语法中才能使用的API。我们先来看看标准的写法，props是如何接收的。 标准写法 // parent.vue<template> <child :count={count} /></template><script lang="ts">impor {defineComponent,ref} from 'vue'import child from './childComponent'export default defineComponent({ components: { child }, setup() { const count = ref(0) return { count } }})</script>// child.vue<template> child{{count}}</template><script lang="ts">impor {defineComponent} from 'vue'export default defineComponent({ props: ['count'], setup(props) { return {} }})</script>setup 写法，使用defineProps // parent.vue<template> <child :count={count} /></template><script setup lang="ts">impor {ref} from 'vue'import child from './childComponent' const count = ref<number>(0)</script>// child.vue<template> child{{count}}</template><script setup>defineProps(['count'])</script>❝
注意：使用sfc-setup语法，不需要引入defineProps
❞
在这里我们只需要简单的声明props，写法简洁了不少。 ❝
那如何给props做类型检查呢？
❞
<script setup>defineProps({ count: Number, title: { type: String, default: 'header' }, data: { type: Object, defualt () { return {} } }})</script>❝
如何使用TS进行类型注解呢？
❞
<script lang="ts" setup>interface d { name: string } defineProps<{ count: number // Number要换成ts的语法 title: string data: d}>()</script>❝
我们发现，props没有被赋予默认值，在TS的写法中，给props设置默认值有2种方式
❞
ES6的变量解构赋值 defineProps返回一个对象，我们可以在解构返回的对象，同时赋予默认值。 <script lang="ts" setup>interface d { name: string } const {count = 0, title = 'header', date = { name: 'a' }} = defineProps<{ count: number // Number要换成ts的语法 title: string data: d}>()</script>withDefaults ❝
官方后续推出了withDefaults来给props提供默认值；withDefaults会对默认值进行类型检查。
❞
<script lang="ts">// 别忘记了引入 withDefaultsimpor { withDefaults } from 'vue' interface d { name: string } const props = withDefaults(defineProps<{ count: number // Number要换成ts的语法 title: string data: d}>(), { count: 0, title: 'header', data: () => ({name: '王小二'})})</script>
自定义事件
要在setup中，使用事件，需要借助defineEmits，这也是是一个仅能在sfc-setup语法中使用的编译器宏。 <script setup lang="ts"> // 定义事件，同时做类型注解 // 非TS写法：const emits = defineEmits(['create']) const emits = defineEmits<{ (e: 'create', value: string): void }>() // 触发事件 const addTodo = () => { emits('create', 'hi') }</script>补充一个用Vue3 + ts 重构的官方TodoMVC例子：codesandbox.io/s/vibrant-w…
总结到此这篇关于vue3.0 sfc中setup变化的文章就介绍到这了,更多相关vue3.0 sfc中setup变化内容请搜索51zixue.net以前的文章或继续浏览下面的相关文章希望大家以后多多支持51zixue.net！
下载地址:
JavaScript 中的文档对象模型 DOM
在Vue中是如何封装axios |
