一、什么是组件化

组件系统是 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的使用，这里我们只是简单地介绍了这几种模式，更深层次的功能还需要自己研究