组件局部注册
hello vue
is 属性挂载组件
常见：ul、select、table
（字符串模板除外：.vue文件）
例：在table里使用组件无效，添加一个is属性。在is下往下写无效。
props
数组和对象是引用类型，指向同一片内存空间，所以props是数组和对象时，修改子组件内容会影响到父组件。默认双向绑定。
数据验证
Vue.component('my-component',{
props:{
propA:Number, //必须是数字类型
propB:[String,Number],
propC:{//布尔值，如果没定义，默认是true
type:Boolean,
default:true
}，
propD:{//数字，而且是必传
type:Number,
required:true
}，
propE:{//如果是数组或对象，默认值必须是一个函数来返回
type:Array,
default:function (){
return [];
}
}，
propF:{//自定义一个验证函数
validator:function(value){
return value > 10;
}
}
}
})
自定义事件
v-on 监听自定义事件外，也监听DOM事件。用.native 修饰符表示监听的是一个原生事件，监听的是该组件的根元素。
使用 v-model
- 接受一个value属性；
- 在有新的value时触发input事件
{{ value }}
非父子组件通信
推荐使用一个空 Vue 实例作为中央事件总线（bus），也就是一个中介。
{{ message }}
非父子组件通信--父链、子链
this.$parent 可以在子组件中取到父组件的东西
this.$children 可以拿到app 实例里的所有子组件，如果有很多子组件，可以得到一个数组。
修改父（子）组件内容，最好不这么做！
非父子组件通--子组件索引
子组件索引只在组件渲染完成后填充，非响应式的，仅作为直接访问子组件的应急方案，应当避免在模板、计算属性中使用自定义子组件索引。
加载两个相同的组件，用ref 区分，如果需要for循环，可以动态绑定:ref="a"
取值：
this.$refs.a
slot 内容分发
当需要让组件组合使用时，要内容分发，混合父组件内容和子组件模板就叫内容分发。
{{ message }}
具名slot
在一个组件里，设置多个slot来区分显示的内容。（按照slot顺序展示：你好 朋友）
你好
朋友
script
slot展示默认内容
如果组件里没有内容，就会显示slot里的默认内容。内容作用域只与当前组件（my-com）相关，与父组件无关。
script
Vue.component( 'my-com',{
template:'hello 这里是默认 ',
});
访问slot
rander函数用的多
mounted(){
this.$slots.default //取默认内容
this.$slots.a //取a的内容
}
组件的高级用法
递归组件
满足条件：
- 必须给组件设置一个name。
- 在一个合适的时间结束组件的递归，否则报超栈的错误。
内联模板（少用）
给组件标签使用inline-template特性，组件就会把它的内容当做模板，而不是当做内容分发。会替代子组件的template来显示。
{{message}}
script
结果为：你好
{{message}}作用域为组件内的data，有些难理解，少用吧~
异步组件
组件比较庞大时，使用异步组件
- 按需加载，可以节省首次加载的时间，提高速度，也算是一个性能优化。
- 那么一个组件可能会被使用多次，按需加载的话也不会加载多次，第一次加载完成就会缓存下来，和webpack是一样的，所以不用担心
$nextTick
等组件渲染完后使用
this.$nextTick( () => {
});
vue 如何观察数据变化？
并不是直接更新DOM，而是开启一个检查队列，缓存在一次事件循环中，缓存中会排除重复数据来避免不必要计算或DOM的操作，在下一次循环tick中，vue才会刷新队列，执行实际的操作。如果使用for循环动态改变100次数据，实际上只触发1次
检测：
vue 优先使用promise检测，不支持会使用HTML5新特性 Mutation Observer 的方法，都不支持采用setTimeout
x-template
前提是你没有使用webpack
手动挂载实例
一般使用 new vue 创建实例
new Vue({
el:'#app'
})
在特殊情况下也可以动态创建 vue 实例。
vue提供两个API：
extend : 基础vue 构造器，创建了一个子类。参数包含组件选项的对象
$mount ：挂载 （有很多参数，参见官网）
hello Vue
结果：from extend 覆盖 hello vue
问答模块
1.watch 与 computed 区别
watch：单纯监听某些东西变化，执行一些操作。
computed：根据已有的 data 或 props 的改变，来动态输出一个内容.常见的：排序、过滤、千位运算符等计算属性。
2.bus 怎么避免全局污染？
在 webpack 中，bus是一个bus.js文件，通过模块化就不会全局污染。
import bus from './bus.js'
3.mixins混合
把部分vue的配置merge到实例里，如：data、methods、props、计算属性、生命周期等内容，形成复用。
mixins:[]
组件解决UI的复用，mixins混合解决组件内部配置的复用
4.远程搜索（需要补充）
数据过多不建议使用select数据下拉。
5.keep-alive (需要补充)
让组件做缓存
文章内容参考：
Vue.js 实战之组件篇：https://segmentfault.com/l/1500000009448056/play
说说Vue的异步组件：https://juejin.im/entry/599562f36fb9a0249716d299
vue.js官网：https://cn.vuejs.org/v2/guide/components.html