Vue.js中如何使用单文件组件？代码举例讲解

在 Vue.js 中,我们可以使用 .vue 文件定义单文件组件。一个单文件组件由三个部位组成:

• template:组件模板
• script:组件逻辑
• style:组件样式

示例代码:

vue
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="sayHi">Say Hi</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "Hello!"
    }
  },
  methods: {
    sayHi() {
      alert("Hi!")
    }
  }
}
</script>

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

使用单文件组件的好处:

1. 组件的模板、逻辑、样式在同一个文件中,方便维护。
2. 支持使用预处理器如 Pug、Babel、SCSS 等。
3. 支持 scoped CSS ,避免样式冲突。
4. 支持 module 方式编写 JS 和 CSS ,方便重构和测试。
5. 易与模块打包工具如 Webpack 集成。

在 Vue CLI 创建的项目中,会默认使用 .vue 文件,快速入口开发。但在浏览器环境中,CSS 和 JS 仍需要提取,不支持直接引用 .vue 文件。

单文件组件的使用注意点:

1. 一个 .vue 文件只定义一个组件。
2. 组件名应与文件名同名,且首字母大写。
3. template必须只有一个根节点。
4. script 必须使用 export default 定义组件选项对象。
5. style 可以添加 scoped 属性,在当前组件添加独立作用域。