本文主要是介绍Vue单文件组件SFC，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1. 定义组件
<template><div>{{count}}</div><br ><button @click="addcount">count++</button>
</template><script setup>
//注意上方使用script标签内书写了setup 这个单文件组件是私有的
//此组件的父控件不会访问到此组件任何的属性
//如果想访问请使用defineExpose宏显示暴漏
//defineExpose({属性名称,方法名称})
import {ref} from 'vue'
let count=ref(1)function addcount(){count.value++
}
</script><style>
</style>
2. 使用组件
<template><classtest /><classtest></classtest><classtest></classtest>
</template>
<script setup>
import classtest from "./components/classtest.vue";
</script>
<style scoped>
</style>
3. 注册全局组件
import './assets/main.css'import { createApp } from 'vue'
import App from './App.vue'
//引入组件地址
import classtest from "./components/classtest.vue";
//引入组件地址
import classtest2 from "./components/classtest2.vue";createApp(App)
//此处注意次序,
//1.先注册App.vue组件
//2.App组件注册完毕,在注册其下的子组件(子组件之间不分先后次序)
//3.最后在进行挂载
.component('classtest',classtest)
.component('classtest2',classtest2)
//挂载
.mount('#app')4. 注册局部组件
①使用<script setup>单文件组件
<template><classtest /><classtest></classtest>
</template>
<script setup>
import classtest from "./components/classtest.vue";
</script>
<style scoped>
</style>②不使用<script setup>单文件组件
<template><classtest /><classtest></classtest>
</template>
<script>
import classtest from "./components/classtest.vue";export default {components:{classtest},setup() {}
}
</script>
<style scoped>
</style>
在整个指引中，我们都使用 PascalCase 作为组件名的注册格式，这是因为：
PascalCase 是合法的 JavaScript 标识符。这使得在 JavaScript 中导入和注册组件都很容易，同时 IDE 也能提供较好的自动补全。
<PascalCase /> 在模板中更明显地表明了这是一个 Vue 组件，而不是原生 HTML 元素。同时也能够将 Vue 组件和自定义元素 (web components) 区分开来。
在单文件组件和内联字符串模板中，我们都推荐这样做。但是，PascalCase 的标签名在 DOM 内模板中是不可用的，详情参见 DOM 内模板解析注意事项。
为了方便，Vue 支持将模板中使用 kebab-case 的标签解析为使用 PascalCase 注册的组件。这意味着一个以 MyComponent 为名注册的组件，在模板中可以通过 <MyComponent> 或 <my-component> 引用。这让我们能够使用同样的 JavaScript 组件注册代码来配合不同来源的模板。
这篇关于Vue单文件组件SFC的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
