Vue单文件组件与组件风格

发表于 分类于

单文件组件

Vue 单文件组件（Single File Component，SFC）是 Vue.js 中的一种组件编写方式，它将一个完整的组件定义封装在一个单独的文件中，包括模板、脚本和样式。这种方式的主要优点是代码组织更加清晰，维护性更高，并且使得代码复用更加容易。

一个典型的 Vue 单文件组件通常包括以下三个部分：

  1. 模板（Template）： 定义了组件的结构和布局，使用 HTML 标签和 Vue 模板语法编写。模板通常位于单文件组件的 <template> 标签中。
  2. 脚本（Script）： 包含了组件的逻辑和行为，使用 JavaScript 编写。脚本通常位于 <script> 标签中，可以使用 ES6 模块化语法来导入其他模块或组件。
  3. 样式（Style）： 包含了组件的样式信息，使用 CSS 或 CSS 预处理器（如 Sass、Less）编写。样式通常位于 <style> 标签中，可以使用 scoped 属性使得样式仅在当前组件中生效。

下面是一个 Vue 单文件组件MyComponent.vue的示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Vue is awesome!'
    }
  }
}
</script>

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

  • 在上面的示例中，<template> 标签包含了组件的结构，<script> 标签包含了组件的逻辑，<style> 标签包含了组件的样式，并且使用了 scoped 属性，使得样式仅在当前组件中生效。

  • 要在 Vue 项目中使用单文件组件，通常需要使用构建工具（如 Vue CLI 或 Webpack）来处理和打包这些组件。Vue 单文件组件的文件扩展名通常是 .vue。
    单文件组件的使用使得 Vue 项目的代码结构更加清晰和模块化，提高了开发效率和维护性。

单文件组件引用

假设你已经有一个 Vue 3 项目，或者你可以使用 Vue CLI 创建一个新项目。以下是一个示例项目结构：

1
2
3
4
5
6
7
8
9
my-vue-project/
├── src/
│   ├── components/
│   │   ├── MyComponent.vue
│   ├── App.vue
│   ├── main.js
├── public/
├── package.json
└── ...

  1. 首先，确保你已经创建了 MyComponent.vue 单文件组件，并且在其中编写了你的组件内容，如上面提到的。这里的内容是：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <!-- MyComponent.vue -->
    <template>
      <div>
        <h1>{{ message }}</h1>
      </div>
    </template>

    <script>
    export default {
      data() {
        return {
          message: 'Hello from MyComponent!'
        };
      }
    };
    </script>

    <style scoped>
    /* 样式代码 */
    </style>

  2. 在 App.vue 组件或你需要的其他组件中，可以使用如下方式引入和使用 MyComponent：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <!-- App.vue -->
    <template>
      <div>
        <h1>My Vue App</h1>
        <my-component></my-component>
      </div>
    </template>

    <script>
    // 导入 MyComponent.vue 单文件组件
    import MyComponent from './components/MyComponent.vue';

    export default {
      components: {
        'my-component': MyComponent, // 注册 MyComponent 组件
      }
    };
    </script>

  3. 在 main.js 中，你可以创建 Vue 应用并将其挂载到一个 HTML 元素上：

    1
    2
    3
    4
    5
    // main.js
    import { createApp } from 'vue';
    import App from './App.vue';

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

  4. 最后，在你的 HTML 文件中，添加一个 ID 为 app 的元素，用于挂载 Vue 应用：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!-- public/index.html -->
    <!DOCTYPE html>
    <html>
    <head>
      <!-- ... -->
    </head>
    <body>
      <div id="app"></div>
    </body>
    </html>

现在，当你启动你的 Vue 3 项目时，MyComponent 组件应该被正确引入和渲染在你的应用中。

Vue组件风格

Vue 组件可以按照两种不同的风格书写，分别是选项式 API（Options API）和组合式 API（Composition API）。这两种风格各有特点，开发者可以根据项目的需求和个人偏好选择其中一种或混合使用。

选项式 API（Options API）

这是 Vue 2.x 版本中使用的主要编写组件的方式。在选项式 API 中，一个组件通常由一个包含一系列选项的对象构成，例如 data、methods、computed、watch 等。这种方式适用于较小规模的组件，将组件的不同选项按照功能划分，易于理解和维护。

示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
   <!--CounterComponent.vue -->
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
};
</script>

在App.vue中引用注册组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- App.vue -->
<template>
  <div>
    <my-component></my-component>
  </div>
</template>

<script>
// 导入 MyComponent.vue 单文件组件
import MyComponent from './Comp.vue';

export default {
  components: {
    'my-component': MyComponent, // 注册 MyComponent 组件
  }
};
</script>

export default

export default 是 JavaScript 模块系统中的语法，用于导出模块的默认成员。它通常用于一个模块中只导出一个主要的功能、类、函数或对象。
具体来说，export default 用于将一个值或对象作为模块的默认导出，这意味着其他模块在导入该模块时可以使用不同的语法引用它。
例如，假设你有一个名为 myModule.js 的模块，其中包含一个默认导出：

1
2
3
4
5
6
// myModule.js
const myFunction = () => {
  console.log('This is a function.');
};

export default myFunction;

然后，你可以在另一个模块中导入并使用它，可以选择为默认导出指定任何名称：

1
2
3
4
// 可以为默认导出指定任何名称，这里使用 myFunction
import myFunction from './myModule.js';

myFunction(); // 调用默认导出的函数

另外，你还可以使用通用的 * 导入来获取默认导出：

1
2
3
import * as myModule from './myModule.js';

myModule.default(); // 调用默认导出的函数

总之，export default 允许你在一个模块中指定默认导出，这样其他模块就可以更灵活地导入和使用它。

组合式 API（Composition API)

这是 Vue 3.x 版本引入的新的组件编写方式。组合式 API 提供了一种更灵活和功能性更强大的方式来组织组件的代码。它允许开发者将相关功能逻辑集中在一起，而不是按选项拆分，这有助于提高代码的可维护性和复用性。

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!--CounterComponent.vue -->
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 使用 ref 创建一个响应式对象
    const count = ref(0);

    // 创建一个方法来修改 count
    const increment = () => {
      count.value++;
    };

    // 返回 count 和 increment 函数
    return {
      count,
      increment,
    };
  },
};
</script>

组合式 API 引入了 setup 函数，使得组件的逻辑可以更加灵活地组织，还引入了一些新的响应式函数（如 ref、reactive）来管理组件的数据状态。这种方式适用于大型、复杂的组件和项目，使得组件的开发更具可维护性。

导入引用组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!--App.vue -->
<template>
  <div>
    <CounterComponent></CounterComponent>
  </div>
</template>

<script >
import Comp from './Comp.vue';

export default {
  components: {
    'CounterComponent': Comp,
  },
}
</script>

script setup

script setup是 Vue 3.2.0+ 中引入的新语法糖，它的主要目的是简化组件的写法，尤其是对于功能较简单的组件。它可以替代传统的 script部分和 setup 函数。
例如上面的CounterComponent.vue组件使用script setup改写代码更加精简

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--CounterComponent.vue -->
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const count = ref(0);
const increment = () => {
  count.value++;
};
</script>

注意其中的主要区别是 <script setup> 消除了显式的 setup 函数声明，而且不需要手动导出选项，它提供了更简洁的语法来定义组件的响应式数据和方法。