An Introduction to Components笔记

An Introduction to Components

Vue提供组件（Component）机制，就是可以复用的一段代码。也是一个vue实例，他可以通过自己的标签被嵌入到整个vue的web app中。

大体上创建实例所需的选项是一样的，唯一需要注意的就是组件的data选项，在component中data不是一个对象，而是一个函数，通过一个函数来返回一个对象。

<div id="app">
  <my-cmp></my-cmp>
  <hr>
  <my-cmp></my-cmp>
</div>
<script type="text/javascript">
  Vue.component('my-cmp', {
    data: function(){
      return {
        status:'normal'
      }
    },
    template: '<h1>Status: {{ status }}</h1>'
  });
  new Vue({
    el: "#app"
  });
</script>

全局和本地组件注册

通过Vue.component('cmp-name', {})注册组件是全局有效的，任何Vue实例都可以直接引用。如果是在vue实例的components的属性中注册，那就只有当前这个vue实例内可以使用对于其他实例是无效的。

App.vue

通过vue-cli用模板创建的文件，都是用组件的形式开发了，其中有一个根组件，就是App.vue。相当于整个web app的首屏入口，这里主要是注意一下data选项要按组件的规则写，也就是写成函数形式。

ES6 import export

每天都发现一点ES6的新语言特性，好理解，但是不好记忆。说简单了，就是javascript要做成可以模块化，工程化的大型开发语言。于是又export import这样类似 include 这样语句。道理明白，但要适应需要一个过程，要是达到能够运用的阶段，又是很长的一个过程。