目录
前言
在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"> // 别忘记了引入 withdefaults impor { 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变化内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com!