Vue2的组件通信

丨 props

父组件向子组件传递值和方法，不能修改父组件的数据，会报错，如果要对值进行修改需要用到.sync进行双向数据绑定。

data() {
  return {
     msg: '这是父组件内msg的值'
  }
}

{{msg}}

props: {
   msg: {
     type: String,
     default: '默认值'
   }
}

---

丨 ref

通过ref指向的DOM元素，获取该元素内的属性或者方法

this.$refs.child.msg（属性或者方法）

---

丨 $emit / v-on

父组件向子组件传递方法

methods:{
  //通过v-on把该方法传递给子组件使用
  parentClick(data){
    alert(data)
  }
}

点击

---

丨 $children / $parent

this.$children[0] 可以获取第一个子组件中的内容。
this.$parent 可以获取到父组件中的内容。

---

丨 $attrs / $listeners

$attrs / $listeners可以从父组件向孙子组件传递值和事件，中间组件不对其进行其它操作。

---

丨 provide / inject

父子组件之间通信，无论孙组件嵌套的多深，都可以获取到，不推荐在日常开发中使用。

//父组件中的传值
provide() { 
    return {
      msg: this.msg,  //data中的值
      parentClick: this.parentClick   //methods中的方法
    }
  },

//子、孙组件中的取值
inject: { 
    msg: {
      type:String,
      default: "默认值"
    },
    parentClick: {
      type: Function
    }
  },

---

丨 Vuex

---

丨 EventBus

EventBus被称为中央事件总线，组件之间可以平行的通知上下级，但是如果使用不慎，就会导致难以维护的灾难，因此需要更加完善的Vuex进行状态管理。

• 方法一：可以单独创建一个js进行引入
• 方法二：可以通过main.js全局引入
• 方法三：可以通用main.js注入到Vue根对象上

// main.js
Vue.prototype.$bus = new Vue()

需要向外发送事件的组件

点击

parentClick(){
     this.$bus.$emit("sendMsg",this.msg)
}

mounted() {   //需要接受事件的组件
   this.$bus.$on("sendMsg",data=>{
     console.log(data)
   })
 }

---

丨 $root

$root可以拿到App.vue中的数据和方法

---

丨 slot

通过插槽传递参数

// Child.vue



// Parent.vue

    {{ msgSlot.msg}}