组件系统

Vue组件基础

这里有一个Vue组件的示例：

// 定义一个名为 button-counter 的新组件
Vue.component("button-counter", {
  data: function () {
    return {
      count: 0,
    };
  },
  template:
    '<button v-on:click="count++">You clicked me {{ count }} times.</button>',
});

组件是可复用的Vue实例，且带有一个名字：在这个例子中是。我们可以在一个通过new Vue创建的Vue根实例中，把这个组件作为自定义元素来使用：

<div id="components-demo">
  <button-counter></button-counter>
</div>

new Vue({ el: "#components-demo" });

因为组件是可复用的Vue实例，所以它们与new Vue接收相同的选项，例如data、computed、watch、methods以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。

组件的复用

你可以将组件进行任意次数的复用：

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

注意当点击按钮时，每个组件都会各自独立维护它的count。因为你每用一次组件，就会有一个它的新实例被创建。当我们定义这个组件时，你可能会发现它的data并不是像这样直接提供一个对象：

data: {
  count: 0;
}

取而代之的是，一个组件的data选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

data: function () {
  return {
    count: 0
  }
}

如果Vue没有这条规则，点击一个按钮就可能会像如下代码一样影响到其它所有实例。

单文件组件

在很多Vue项目中，我们使用Vue.component来定义全局组件，紧接着用new Vue({ el: ‘#container ‘})在每个页面内指定一个容器元素。这种方式在很多中小规模的项目中运作的很好，在这些项目里JavaScript只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由JavaScript驱动的时候，下面这些缺点将变得非常明显：

全局定义(Global definitions)强制要求每个component中的命名不得重复
字符串模板(String templates)缺乏语法高亮，在HTML有多行的时候，需要用到丑陋的 \
不支持CSS (No CSS support)意味着当HTML和JavaScript组件化时，CSS明显被遗漏
没有构建步骤(No build step)限制只能使用HTML和ES5 JavaScript，而不能使用预处理器，如Pug (formerly Jade)和Babel

文件扩展名为.vue的single-file components (单文件组件)为以上所有问题提供了解决方法，并且还可以使用webpack或Browserify等构建工具。

<template>
  <div id="app">
    <h1>My Todo App!</h1>
    <TodoList />
  </div>
</template>

<script>
import TodoList from "./components/TodoList.vue";

export default {
  components: {
    TodoList,
  },
};
</script>

<style lang="scss">
@import "./variables.scss";

*,
*::before,
*::after {
  box-sizing: border-box;
}

#app {
  max-width: 400px;
  margin: 0 auto;
  line-height: 1.4;
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: $vue-blue;
}

h1 {
  text-align: center;
}
</style>

一个重要的事情值得注意，关注点分离不等于文件类型分离。在现代UI开发中，我们已经发现相比于把代码库分离成三个大的层次并将其相互交织起来，把它们划分为松散耦合的组件再将其组合起来更合理一些。在一个组件里，其模板、逻辑和样式是内部耦合的，并且把他们搭配在一起实际上使得组件更加内聚且更可维护。即便你不喜欢单文件组件，你仍然可以把JavaScript、CSS分离成独立的文件然后做到热重载和预编译。

<!-- my-component.vue -->
<template>
  <div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

最近更新于0001-01-01