Vue3 创建单文件组件(SFC)

Vue 的单文件组件 (即 *.vue 文件,英文 Single-File Component,简称 SFC) 是一种特殊的文件格式,使我们能够将一个 Vue 组件的模板、逻辑与样式封装在单个文件中。

在 Vue3 中,你可以使用 .vue 文件来创建单文件组件(Single File Components, SFCs),这个文件包含了组件的模板、JavaScript 代码以及 CSS 样式。

现在我们将删除通过 npm init vue@latest 命令创建的实例项目中的所有内容(参考 Vue3 安装),以便在 Vue 中创建自己的简单网页。

在我们开始编写代码之前,删除 <template>、<script> 和 <style> 标签内的所有内容,以及任何像 setup 或 scoped 这样的属性。

您的 App.vue 文件现在应该如下所示:

App.vue 文件:

<script></script>

<template></template>

<style></style>

同时我们可以先清空 src 目录中的文件夹 assetscomponents,里面的文件我们可以后期自己添加补充 。

main.js 文件代码修改为如下代码:

main.js 文件代码:

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

现在我们就创建了一个简单的项目,在 App.vue 文件写入以下代码:

App.vue 文件代码:

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, HAODAIMA!'
    }
  }
}
</script>

<style>
h1 {
  color: blue;
}
</style>

以上实例中我们定义了一个包含一个标题的简单组件。组件的模板包含一个 <h1> 元素,使用了 Vue3 的模板语法将 message 属性绑定到了这个元素的文本内容中。

JavaScript 部分包含了一个 data 函数,返回了一个包含了 message 属性的对象,我们将这个属性绑定到了模板中。

最后,CSS 样式定义了标题的颜色为蓝色。

在组件的 JavaScript 部分,我们使用了新的 export default 语法,这个语法可以让我们将组件定义导出为一个默认的对象。在 Vue3 中,我们可以使用这个语法来定义组件,而不必像 Vue2 那样使用 Vue.component 函数。

访问 http://localhost:5173/,以上代码执行结果为:

使用组件

当我们定义好了一个组件之后,我们可以在其他组件中使用这个组件。

使用组件,我们需要先创建组件,比如以下实例在 ./src/components/ 目录下创建 HelloHaodaima.vue 组件文件,代码如下:

./src/components/HelloHaodaima.vue 文件代码:

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Haodaima!'
    }
  }
}
</script>

<style>
h1 {
  color: red;
}
</style>

然后我们在 ./src/main.js 文件中引入并定义该组件:

./src/main.js 文件代码:

import { createApp } from 'vue'

import App from './App.vue'
import HelloHaodaima from './components/HelloHaodaima.vue'

const app = createApp(App)
app.component('hello-haodaima', HelloHaodaima) // 自定义标签
app.mount('#app')

在父组件的模板中,我们可以使用自定义标签的方式来引入子组件,就像以下 App.vue 文件代码:

App.vue 文件代码

<template>
  <div>
    <hello-haodaima></hello-haodaima>
  </div>
</template>

访问 http://localhost:5173/,以上代码执行结果为: