轻松学Vue组件之单文件组件

让我来详细讲解一下“轻松学Vue组件之单文件组件”的完整攻略。

标题

什么是单文件组件？

单文件组件是 Vue.js 组件的一种组织方式，它将模板、逻辑代码和样式都写在一个文件中，方便管理和复用。

如何创建单文件组件？

创建单文件组件很简单，只需要在项目中新建一个 .vue 后缀的文件，然后按照以下格式编写代码：

<template>
  <!-- 模板代码 -->
</template>

<script>
  // Javascript 代码
</script>

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

单文件组件的优点

1. 方便管理和维护，所有代码都在一个文件中，查找方便。
2. 方便复用，在其他地方也可以直接引用该组件。
3. 可以使用最新的 JavaScript 语法，如ES6、ES7等。
4. 可以使用最新的 CSS 技术，如 CSS Modules 等。

示例一

下面我们来看一个简单的单文件组件的例子：

<template>
  <div class="hello">
    {{ msg }}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<style scoped>
.hello {
  font-size: 2em;
  text-align: center;
  color: #42b983;
}
</style>

在上面的代码中，我们定义了一个名为 HelloWorld 的组件，在组件的模板中展示了一个包含变量 msg 的文本。在 JavaScript 代码部分，我们使用了 export default 语法来导出组件，在 props 选项中定义了一个名为 msg 的属性，该属性的类型为 String。最后，在样式中使用了 scoped 属性，表示该样式只作用于当前组件。

示例二

下面我们再看一个复杂一些的示例：

<template>
  <div class="widget">
    <h1>{{ title }}</h1>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </ul>
    <button @click="add">添加</button>
  </div>
</template>

<script>
export default {
  name: 'Widget',
  props: {
    title: String,
    items: Array
  },
  data() {
    return {
      newItem: ''
    }
  },
  methods: {
    add() {
      this.$emit('add', this.newItem)
      this.newItem = ''
    }
  }
}
</script>

<style scoped>
.widget {
  padding: 20px;
  background-color: #f5f5f5;
}
.widget h1 {
  margin-bottom: 20px;
}
.widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.widget ul li {
  margin-bottom: 10px;
}
.widget input[type="text"] {
  padding: 5px;
  width: 200px;
}
.widget button {
  padding: 5px;
  margin-left: 10px;
  background-color: #42b983;
  color: #fff;
  border: none;
  cursor: pointer;
}
</style>

在上面的代码中，我们定义了一个名为 Widget 的组件，在组件的模板中展示了一个包含标题、列表和添加按钮的小部件。在 JavaScript 代码部分，我们使用了 export default 语法来导出组件，在 props 选项中定义了两个属性，分别为 title 和 items，分别表示小部件的标题和文本列表。在 data 函数中，我们定义了一个名为 newItem 的变量，表示用户输入的新条目内容。在 methods 选项中，我们定义了一个名为 add 的方法，表示用户点击添加按钮的行为。该方法会触发父组件通过 $emit 发送一个名为 add 的事件，并将新条目内容传递给父组件进行处理。在样式中，我们定义了一些基本的样式规则和类名，以达到控制效果。

结论

使用单文件组件能够方便的管理和复用Vue组件，并且可以使用最新的JavaScript和CSS技术。以上我们通过两个例子讲解了单文件组件的基本规范，相信对于初学者会有所帮助。