vue组件

组件
推荐使用小写加减号分割的形式命名。
一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：
有些元素内不允许出现不符合规定的元素
使用特殊的is属性来在挂载组件
<table> 
<tbody is=”my-component” ></tbody> 
</ table> 

动态组件：用component标签定义一个组件，绑定一个is，type数据对应的是哪个子组件名，就显示哪个子组件
<component :is="type"></component>
v-once 在子组件的模板里写上，可以在切换组件显示时将子组件加入缓存，而不是删除，来减少内存消耗
在动态组件上使用 keep-alive
<!-- 失活的组件将会被缓存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

全局注册，可以在任何实例里使用,全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生
Vue.component('button-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
局部注册，只能在使用局部组件的实例里使用
var ComponentA = { /* ... */ } //在本页面定义
import ComponentA from './ComponentA' //导入另一个组件文件
var ComponentB = {
  components: {
    'component-a': ComponentA
  },
  // ...
}
基础组件的自动化全局注册https://cn.vuejs.org/v2/guide/components-registration.html，解决每次都要导入很多基础组件

组件传值 
父组件的数据通过 Prop 向子组件传递数据
可以直接在标签里传值， 也可以在父组件定义data，实现动态绑定

直接传值
<div id="app">
    <child message="hello!"></child>
</div>
动态绑定传值
<div id="app">
    <div>    
      <child v-bind:message="parentMsg"></child>
    </div>
</div>
 
子组件
Vue.component('child', {
  props: ['message'],
  template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
  el: '#app',
  data: {
    parentMsg: '父组件内容'
  }
})
</script>
Props使用对象类型，可以添加额外的验证功能
Vue.component('example', {
  props: {
    message: {[String, Number],
    required: true,
    default: 100,
     validator: function (value) {
        return value > 10
      }
   }
  }
})
传入一个对象的所有属性
使用不带参数的 v-bind (取代 v-bind:prop-name)
post: {
  id: 1,
  title: 'My Journey with Vue'
}
<blog-post v-bind="post"></blog-post>

自定义事件 子传父
在子组件上绑定一个事件，触发this.$emit('increment')，调用父组件的事件increment的incrementTotal方法
<div id="app">
    <div id="counter-event-example">
      <p>{{ total }}</p>
      <button-counter v-on:increment="incrementTotal"></button-counter>//在组件上绑定事件监听
      <button-counter v-on:increment="incrementTotal"></button-counter>//在组件上绑定事件监听
    </div>
</div>
 
<script>
Vue.component('button-counter', {
  template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementHandler: function () {
      this.counter += 1
      this.$emit('increment')//可以增加参数传递给父组件
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {//可以接受子组件传递的参数
      this.total += 1
    }
  }
})
</script>

原生事件
在子组件上@click.native="handle"可以绑定原生事件，而不用通过子组件来触发父组件上的事件

插槽
在组件中添加和命名插槽
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：
<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

异步组件???

在每个 new Vue 实例的子组件中，其根实例可以通过 $root 属性进行访问
$parent 属性可以用来从一个子组件访问父组件的实例
refs
<input ref="input">
ref挂载在组件上，可以在父元素内获得组件的实例
ref挂载在元素上，可以获得dom元素对象
 this.$refs.input.focus()
$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。

程序化的事件侦听器
通过 $on(eventName, eventHandler) 侦听一个事件
通过 $once(eventName, eventHandler) 一次性侦听一个事件
通过 $off(eventName, eventHandler) 停止侦听一个事件