丨 props

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

<!--Parent.vue-->
<child :msg="msg"></child><!-- 如果要修改值则写成 :msg.sync="msg" -->

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

<!--Child.vue-->
<div>{{msg}}</div>

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

丨 ref

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

<child ref="child"></child>

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

丨 $emit / v-on

父组件向子组件传递方法

<!--Parent.vue-->
<child @parentClick="parentClick"></child>

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

<!--Child.vue-->
<button @click="$emit('parentClick',123)">点击</button>

丨 $children / $parent

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

<!--Parent.vue-->
<template>
  <div>
    <button @click="parentClick">父组件中的button</button>
    <child></child>
  </div>
</template>

<script>
import Child from "./Child";

export default {
  name: "Parent",
  components: {Child},
  data() {
    return {
      msg:'这是父组件中的值'
    }
  },
  methods: {
    parentClick() {
      //获取子组件的事件和值
      this.$children[0].childClick0()
      console.log(this.$children[0].msg)
    },
    parentClick0() {
      alert('这是父组件中的事件')
    }
  }
}
</script>

<!--Child.vue-->
<template>
  <button @click="childClick">子组件中的button</button>
</template>

<script>
export default {
  name: "Child",
  data() {
    return{
      msg:'这是子组件的值'
    }
  },
  methods:{
    childClick(){
      this.$parent.parentClick0()
      console.log(this.$parent.msg)
    },
    childClick0(){
      alert('这是子组件中的事件')
    },
  }
}
</script>

丨 $attrs / $listeners

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

<!--Parent.vue-->
<template>
  <div>
    <child :msg="msg" @parentClick="parentClick"></child>
  </div>
</template>

<script>
import Child from "./Child";

export default {
  name: "Parent",
  components: {Child},
  data() {
    return {
      msg:'这是父组件中的值'
    }
  },
  methods: {
    parentClick(){
      alert('这是父组件事件')
    }
  }
}
</script>

<!--Child.vue-->
<template>
  <sun-child v-bind="$attrs" v-on="$listeners"></sun-child>
</template>

<script>
import SunChild from "./SunChild";
export default {
  name: "Child",
  components: {SunChild},
}
</script>

<!--SunChild.vue-->
<template>
  <div>
    {{msg}}<button @click="$emit('parentClick')">点击</button>
  </div>
</template>

<script>
export default {
  name: "SunChild",
  props: {
    msg: {
      type:String,
      default: '默认值'
    }
  }
}
</script>

丨 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()

需要向外发送事件的组件

<button @click="parentClick">点击</button>

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

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

丨 $root

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

丨 slot

通过插槽传递参数

// Child.vue
<slot :msg="msg"></slot>


// Parent.vue
<child v-slot="msgSlot">
    {{ msgSlot.msg}}
</child>