一、什么是组件化
组件系统是 Vue 的一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。
组件化可以使代码复用，维护性高，方便测试
二、父组件 => 子组件
- 属性props
// 子组件通过props接受父组件传过来的值
props:{
msg:String
}
// 父组件传值给子组件
<hello-world msg="hellow"></hello-world>
- 引用refs 获取子组件的值
<hello-world ref="hello" msg="hello"></hello-world>
console.log(this.$refs.hello.msg)
这里注意一点这里获取的是组件节点，如果你想获取dom元素节点要加上$el
三、子组件 => 父组件（自定义事件）
// 子组件派发一个事件（handleClick）,传参数为（success）
this.$emit('handleClick','success')
// 父组件监听（handleClick）事件，并做事件的回调处理event就是子组件传过来的参数
<hello-world msg="hello" @handleClick="handleClickParent(event)"></hello-world>
四、兄弟组件通信（通过共同祖辈搭桥$parent或者$root）
//子组件1
this.$parent.$emit('add',1)
//子组件2
this.$parent.$on('add', (val) => {
console.log(val)
})
五、兄弟组件通信（通过bus总线）
这种方式其实和上面那种差不多少
// main.js
Vue.prototype.$bus =new Vue();
//子组件1
this.$bus.$emit('add',1)
//子组件2
this.$bus.$on('add', (val) => {
console.log(val)
})
六、祖先和后代多层传值
- 由于嵌套层数过多，用props不太现实，vue提供了provide/inject来实现该操作
// 祖先
provide () {
return {
msg:'hello'
}
}
// 后代
inject:['msg']
注意：provide/inject主要在高阶插件或组件库里面使用，尽量不要直接应用在程序代码中
- dispatch 后代向祖先传值
vue当中后代给祖先传值是不行的，所以我们手动写一个dispatch方法
// 实现方法
methods:{
dispatch(eventName,data,name){
let parent = this.$parent;
while (parent){
if(parent){
if(parent.$options.name === name){ // 这一步主要是判断在哪一个父组件派发
parent.$emit(eventName,data);
break
}else{
parent = parent.$parent
}
}else{
break
}
}
}
}
// 调用
<button @click="dispatch('add',1,'Home')">点击</button>
// 祖先组件监听
mounted () {
this.$on('add',(val)=>{
console.log(val)
})
}
七、vuex
上面那几种方式只适合小项目或者组件之间相互传值，真正工作中的大型项目还是要用vuex中的store来管理全局数据，并通知组件状态变更。这里我就不多说了，说的话一篇文章也讲不完关于vuex的使用，这里我们只是简单地介绍了这几种模式，更深层次的功能还需要自己研究
