组件用法
-
全局注册
Vue.component('my-component', { //选项 })缺点：权限太大，容错率低
-
局部注册
new Vue({ el: '#app', components: { 'my-component': { //选项 } } })
注意事项
html不分大小写，js区分大小写
自定义标签名称推荐小写和减号分割的形式书写
template的DOM结构必须被元素包裹，纯文本无法渲染
组件有时会受html的限制。像table内规定只允许<tr>,<td>,<th>,可以使用特殊的'is'属性来挂载。
<tbody is='my-component'></my-component>
组件跟实例一样带有data, methods, computed等属性
组件的data属性必须是函数, rutrun出数据(这样组件间的数据就是独立的)
使用props传递数据
在组件中，使用选项 props 来声明需要从父级接收的数据， props 的值可以是两种， 一种是字
符串数组，一种是对象 。
props 中声明的数据与组件 data 函数 return 的数据主要区别就是 props 的来自父级，而 data 中
的是组件自己的数据，作用域是组件本身，这两种数据都可以在模板 template及计算属性 computed
和方法 methods 中使用。
有时候，传递的数据并不是直接写死的，而是来自父级的动态数据，这时可以使用指令 v-bind
来动态绑定 props 的值，当父组件的数据变化时，也会传递给子组件。
<div id="app">
<input type="text" v-model="parentmessage">
<my-component :message="parentmessage"></my-component>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
parentmessage: ''
},
components: {
'my-component': {
template: '<div>{{ message }}</div>',
props: ['message']
}
}
})
</script>
注意：如果你要直接传递数字、布尔值、数组、对象，而且不使用 v-bind，传递的仅仅是字符串
单向数据流
Vue2.x 通过 props 传递数据是单向的了。这样的设计目的是尽可能将父子组件解稿，避免子组件无意中修改了父组件的状态。
父组件数据通过props传进来。子组件可以用data和computed维护一份相联系的数据而不必修改父数据
数据验证
props选项除了数组外，还可以是对象
props: {
//选项有type（定义多个用数组）、defalut、required(布尔值)、验证函数
propA: {
type: [Number, String],
defalut: true,
required: true
},
propB: {
validator: function(value){
return value > 10
}
}
}
组件通信
组件关系可以分为父子、兄弟、跨级组件通信
子组件像父组件传递数据：
使用自定义事件
子组件用$emit()来触发事件，父组件用$on()来监听子组件的事件使用v-model
实现这样一个具有双向绑定的 v-model组件要满足下面两个要求:
接收一个 value属性
在有新的 value 时触发 input事件。
非父子组件通信
在Vue. 2.x中， 推荐使用一个空的Vue实例作为中央事件总线(bus)，也就是一个中介.(发布、订阅模式)
比如你需要租房子， 你可能会找房产中介来登记你的需求 ， 然后中介把你的信息发给满足要求的出租者，出租者再把报价和看房时间告诉中介，由中介再转达给你，整个过程中 ， 买家和卖家 并没有任何交流，都是通过中间人来传话的 。
或者你最近可能要换房了 ， 你会找房产中介登记你的信息 ， 订阅与你找房需求相关的资讯， 一旦有符合你 的房子出现时，中介会通知 你 ，并传达你房子 的具体信息 。
这两个例子中 ， 你和出租者担任的就是两个跨级的组件，而房产中介就是这个中央事件总线 (bus) 。
父链
在子组件中，使用this.$parent可以直接访问该组件的父实例或组件，父组件也可以通过this.$children访问它的所有子组件，而且可以递归向上或向下访问。
尽管Vue允许这样操作，但在业务中，子组件应该尽可能避免依赖父组件的数据。更不该主动修改它的数据。这样父子组件是紧耦合的。
理想状况下，只有组件能修改它的状态。父子组件最好还是通过props和$emit$来通信
子组件索引
Vue提供了子组件索引的方法，用特殊的属性ref来为子组件指定一个索引名称
