1-组件化开发：

我们可以很直观的将一个复杂的页面分割成若干个独立组件，每个组件包含自己的逻辑和样式，再将这些独立组件组合完成一个复杂的页面。这样既减少了逻辑复杂度，又实现了代码的重用。页面是组件的容器，组件自由组合形成完整的页面，当不需要某个组件时，或想要替换某个组件时，可以随时进行替换和删除，而不影响整个应用的运行。

2-组件化开发的好处

• 提高开发效率
• 方便重复使用
• 便于协同开发
• 更容易被管理和维护

3-VUE中组件的特点

vue中一个自定义标签（不是W3C规定的标准标签如div、p等），vue就会把他看成一个组件
不能光写一个自定义的标签而不赋予意义

4-组件分类

• 页面级组件：
  1）一个页面是一个组件
  2）将可复用的部分抽离出来 基础组件

• 全局组件：声明一次 可以在任何地方使用

• 局部组件：必须告诉这个组件属于谁
  一般写插件的时候或者很多人都要用，使用全局组件的多一些。

//1.组件名不要带有大写，多个单词用-连接
//2.只要组件名和定义的名字相同时可以的（首字母可以大写，中间不要有大写）
//3.html采用短横线隔开命名法 JS中转驼峰也是可以的

定义全局组件

Vue.component('my-handsome',{ //一个对象可以看成一个组件
//在自己定义的模板中取自己data返回的数据
template:'<div>{{msg}}</div>',
//组件中数据必须是函数类型，返回一个实例作为组件的数据
data(){
return {msg:'我很英俊'}
}
})
let vm=new Vue({
el:'#app',
data:{
........
}
})

定义局部组件

局部组件使用的三部曲：
1.创建这个组件
2.注册这个组件
3.使用这个组件

组件是相互独立的，不能直接跨作用域(子组件不能直接使用父组件的data)
vm的实例也是一个组件，自定义组件中也拥有声明周期函数

//如果组件共用了数据，会导致同时刷新，但是组件应该是独立性的
//为什么会独立呢？
//因为data是一个函数，return 出去是一个新对象，新对象那就是一个独立的作用域。
// 所以组件中的data要是一个函数，函数是一个作用域，return 出去一个新对象，
// 这样就与其他组件的data不冲突是独立的了
 
//组件理论上是可以无限嵌套的，因为vm本身就是一个组件，他里面也自定义了组件，并且自定义的组件也是一个对象，
//并且和其父级一样拥有各种属性，所以其自己又可以作为“父组件”，他里面也可以放组件
 
let obj={
school:'zfpx'
};
//1.创建组件
let component1={
//这里的引号问题 把里面的单引号转义一下，或者使用ES6的模板字符串
template:'<div @click="school='home'">组件一 {{school}}</div>',
data(){
return obj;
}
};
let component2={
template:'<div @click="fn">组件二 {{school}}</div>',
data(){
return obj;
},
methods:{
fn(){
//这里的this不再指向其父级vm，而是指向自己的组件
console.log(this)
}
}
}
 
 
let vm=new Vue({
el:'#app',
//2.注册组件
components:{
component1:component1, //在ES6中名字一样可以只写一个,如component2那样
component2,
},
data:{
a:1
}
})

组件嵌套

1.如果要在一个组件中使用另一个组件，先要保证使用的组件得是真实存在的，
2.在需要引用这个组件的实例通过components注册这个组件
3.组件需要在父级的模板中通过标签的形式引入
 
//son中要用到grandson，所以得把grandson声明到son上面
let grandson={
template:'<div>grandson</div>'
};
 
//parent中要用到儿子，所以得先把son声明到parent上面
let son={
template:'<div>son <grandson></grandson></div>',
components:{
grandson
}
};
let parent={
template:'<div>parent <son></son></div>',
components:{
son,
}
};
 
 
let vm=new Vue({
el:'#app',
template:'<parent></parent>',
components:{
parent
},
data:{
a:1
}
})

父子组件数据传递(父传子)

组件的传递：
父亲 -> 儿子 -> 孙子 （属性传递）
孙子 -> 儿子 -> 父亲  (事件传递)

html结构

    <div id="app"> 
父亲：{{money}} 
<!--当前组件的属性(m)=父级的值(1)-->
<!--<child m="1"></child>-->
 
<!--给儿子加了一个m属性，属性对应的数据是属于父亲的，但是直接写m="money",money就成了字符串了 
但是我们后面的money是一个变量，所以我们就得用动态绑定:m="money"的格式了
如：
a='1' =>得到的1是一个字符串 :a="1" =>得到的1是一个数字
a="true" =>得到的是一个字符串"true"   :a="true" =>得到的是一个布尔
 
如果自定的属性是有短横线连接的写法时 m-m的话，下面用的话得用驼峰mM
-->
<child :m="money"></child>
</div>

父传子流程：
- 1.首先子组件嵌套在父组件内（结构）
- 2.在html中给子组件的标签中 加上自定义属性 并赋值，这个值就是要在父组件中得到的数据，既然是数据，肯定要是变量，所以我们要给
这个属性前面加上:,叫做动态绑定
- 3.在JS中子组件里，props接收(获取)在上一步中子组件中定义的属性值
- 4.然后在子组件定义的模板中就可以用获取到的属性值了

//这个实例就是一个组件，parent
let vm=new Vue({
el:'#app',
components:{
child:{
//会在当前子组件上声明一个m属性，值是父亲的。(儿子通过props获取到父亲的m属性值)相当于 this.m=100
//如果props是一个数组，他不能校验里面获取到的值是什么类型,把其变成一个对象，里面有几个方法如下：
//props:['m','a'],
props:{
//校验时不能阻断代码的执行，只是警告而已
m:{ //校验属性的类型，如果不带:,得到的肯定是字符串类型，只有:m="1"才是数字类型1，:m="true"才是布尔类型
type:[String,Boolean,Function,Object,Array,Number],
//如果什么都不传，会调用default,要给一个默认值,否则就是false了
default:0,
//此属性是必须传递的意思，但不能与default同用
required:true,
//自定义校验器 第一个参数是当前传递的值，返回true表示通过，false表示不通过
validator(val){
return val>300
}
}
},
 
data(){
return {n:5}    //有了上面的props中的m了，就不能再让自己data（包括methods等其他对象中）中有m了，会冲突
},
 
 
template:'<div>儿子：{{m}} {{n}}</div>',
//如果想在child中取的值名跟parent保持一致，我们可以用computed属性；但是这样很麻烦，直接在child上设置属性的时候
//设置成跟parent一样的名字就好了
// computed:{
//     money(){return this.m}
// },
}
},
data:{
money:400
}
})

父子组件数据传递(子传父)

父亲绑定一些事件，儿子触发这个事件，将参数传递过去 、
单项数据流：(儿子不能改爸爸的数据，告诉爸爸让他改，父亲数据刷新后，儿子就刷新了)

html结构

 <div id="app"> 
父亲：{{money}} 
<!--child.$on('child-msg',things)  相当于订阅-->
<child :m="money" @child-msg="things"></child>
 
</div>
 

子传父流程：
- 1.首先在父可以传子的基础上，给child一个自定义事件，并且这个自定义事件是父亲的方法

• 2.在子组件的methods中定义一个儿子的方法，并且这个方法是要传递(发射)给上一步儿子的自定义方法的，第一个参数是
  child上自定义的事件名，第二个参数是要传递的值
• 3.于是当子组件中的方法触发(点击、双击等等)时,父亲的方法就收到了儿子发射的方法中传递的值，然后更新自己的数据即可。

//这个实例就是一个组件，parent
let vm=new Vue({
el:'#app',
data:{
money:400
},
methods:{
//相当于发布订阅的on
things(val){
this.money=val;
}
},
components:{
child:{
props:['m'],
template:'<div>儿子：{{m}} <button @dblclick="getMoney()">多要钱</button></div>',
methods:{
getMoney(){
//触发自己的自定义事件，让父亲的方法执行 相当于发布
this.$emit('child-msg',800)
}
},
 
}
},
 
})