7.1 使用组件的原因
作用：提高代码的复用性
7.2 组件的使用方法
1. 全局注册
Vue.component('my-component',{
template:'我是组件的内容'
})
var app = new Vue({
el:'#app',
data: {
}
})
优点：所有的Vue实例都可以用
缺点：权限太大，容错率降低
2. 局部注册
var app = new Vue({
el:'#app',
components:{
'my-component':{
template: '我是组件的内容'
}
}
})
3. vue组件的模板在某些情况下会受到html标签的限制
比如 • String 组件关系可分为父子组件通信、兄弟组件通信、跨级组件通信 使用von 除了监昕 DOM 事件外，还可以用于组件之间的自定义事件。 直接甩代码 您好,您现在的银行余额是{{total}}元 $emit的代码,这行代码实际上会触发一个 input事件, ‘input’后的参数就是传递给vmodel绑定的属性的值 您好,您现在的银行余额是{{total}}元中只能还有
, 这些元素，所以直接在table中使用组件是无效的，此时可以使用 is属性来挂载组件
7.3 组件使用的奇淫技巧
template中的内容必须被一个DOM元素包括 ，也可以嵌套template之外的其他选项—data,computed,methods data必须是一个方法 var app = new Vue({
el:'#app',
data: {},
components: {
'btn-component': {
template: '',
data: function(){
return {
count: 0
}
}
}
}
})
7.4 使用props传递数据 父亲向儿子传递数据
props来从父亲组件接收参数，注意，在props中定义的属性，都可以在组件中直接使用props来自父级，而组件中data return的数据就是组件自己的数据，两种情况作用域就是组件本身，可以在template，computed，methods中直接使用props的值有两种，一种是字符串数组，一种是对象vbind动态绑定父组件来的内容7.5 单向数据流
props 传递数据都是单向的了， 也就是父组件数据变化时会传递给子组件，但是反过来不行。
data 内再声明一个数据，引用父组件的 prop
7.6 数据验证
线命名）
中使用必须使用kebabcase（短横线）命名方式。在html中不允许使用驼
峰！！！！！！
须使用驼峰命名方式，若为短横线的命名方式。则会直接保错。
的命名方式，则会报错。验证的 type 类型可以是：
• Number
• Boolean
• Object
• Array
• FunctionVue.component （ ’ my-compopent ’， ｛
props : {
//必须是数字类型
propA : Number ,
//必须是字符串或数字类型
propB : [String , Number] ,
//布尔值，如果没有定义，默认值就是 true
propC: {
type : Boolean ,
default : true
},
//数字，而且是必传
propD: {
type: Number ,
required : true
},
//如果是数组或对象，默认值必须是一个函数来返回
propE: {
type : Array ,
default : function () {
return [] ;
}
},
//自定义一个验证函数
propF: {
validator : function (value) {
return value > 10;
}
}
}
});
7.7 组件通信
7.7.1 自定义事件—子组件给父组件传递数据
JavaScript 的设计模式 一一观察者模式， dispatchEvent 和 addEventListener这两个方法。 Vue 组件也有与之类似的一套模式，子组件用on()来 监昕子组件的事件 。
7.7.2 在组件中使用vmodel
vmodel 其实是一个语法糖，这背后其实做了两个操作
要使用vmodel,要做到:
接收一个 value 属性。
在有新的 value 时触发 input 事件7.7.3 非父组件之间的通信