一：组件

1：先看官方文档

什么是组件
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。
所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。

2：组件形式

这里主要说vue-cli中的组件
分两种，全局组件和局部组件
全局组件注册在main.js
局部组件注册在vue实例里面，用components调用

3：组件传递

组件实例中作用域是孤立的，所以需要数据传递

（1）父传子

props
父组件中

<child message="hello"></child>

子组件

props:['message']

注：html特性不区分大小写，props中大小写须在父组件中转换为kebab-case
动态prop
父组件

<child :my-message="hello"></child>

文档：
如果你想把一个对象的所有属性作为 prop 进行传递，可以使用不带任何参数的 v-bind (即用 v-bind 而不是 v-bind:prop-name)。例如，已知一个 todo 对象：

todo: {
  text: 'Learn Vue',
  isComplete: false
}

然后：

<todo-item v-bind="todo"></todo-item>

将等价于：

<todo-item
  v-bind:text="todo.text"
  v-bind:is-complete="todo.isComplete"
></todo-item>

单向数据流
prop是单向绑定
父组件更新，子组件更新，不能在子组件更新
但是可以用子组件中定义局部变量data或者computed来处理props
props验证
文档

 props: {
    // 基础类型检测 (`null` 指允许任何类型)
    propA: Number,
    // 可能是多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数值且有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 数组/对象的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },

// 自定义验证函数

   propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }

（2）子传父

使用vue的自定义事件
vue实例都具有事件借口
$on(eventName)监听事件
$emit(eventName) 触发事件
父组件

  <button-counter v-on:increment="incrementTotal"></button-counter>
 incrementTotal: function () {
      this.total += 1
    }

子组件

<button v-on:click="incrementCounter">{{ counter }}</button>
methods: {
    incrementCounter: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },

(3) 非父子组件通信

使用一个空的vue实例

  var bus = new Vue();
  bus.$emit('id-selected',1);
  bus.$on('id-selected',function(id){

  })

(4)卡槽slot

官方文档：除非子组件模板包含至少一个插口，否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的插槽时，父组件传入的整个内容片段将插入到插槽所在的 DOM 位置，并替换掉插槽标签本身。
最初在标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。
例：
my-Component 组件

<div>
  <h2>我是子组件的标题</h2>
  <slot>
    只有在没有要分发的内容时才会显示。
  </slot>
</div>

父组件

<div>
  <h1>我是父组件的标题</h1>
  <my-component>
    <p>这是一些初始内容</p>
    <p>这是更多的初始内容</p>
  </my-component>
</div>

渲染结果：

<div>
  <h1>我是父组件的标题</h1>
  <div>
    <h2>我是子组件的标题</h2>
    <p>这是一些初始内容</p>
    <p>这是更多的初始内容</p>
  </div>
</div>

(5)具名插槽

slot 可以用一个name配置
例子
app-layout组件

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

父组件模板：

<app-layout>
  <h1 slot="header">这里可能是一个页面标题</h1>

  <p>主要内容的一个段落。</p>
  <p>另一个主要段落。</p>

  <p slot="footer">这里有一些联系信息</p>
</app-layout>

渲染结果为：

<div class="container">
  <header>
    <h1>这里可能是一个页面标题</h1>
  </header>
  <main>
    <p>主要内容的一个段落。</p>
    <p>另一个主要段落。</p>
  </main>
  <footer>
    <p>这里有一些联系信息</p>
  </footer>
</div>

vue 组件与通信与vuex与computed与生命周期（1）