Skip to content

组合式 API 语法糖 script setup

单文件组件组合式 API 语法糖 (<script setup>) 实验性 Vue3 script-setup 超清新单文件写法 示例 counter 计数器

@/pages/40-lrn/20-vue3/60-script-setup/components/MyCounter.vue

你点了 0 次
other component
vue
<template>
    <div>你点了 {{count}} 次</div>
    <button @click="onClick">点我</button>
    <OtherComponent/>
</template>

<script setup lang="ts">
    import { ref } from "vue"
    import OtherComponent from "./OtherComponent.vue"

    let count = ref(0);
    function onClick() {
        count.value = count.value + 1;
    }
</script>