目录

1、props / $emit （父子通信）

2、$root、 $parent / $children(vue3废弃)

3、ref/$refs

4、EventBus （$emit / $on）

5、provide+inject（依赖注入）

6、$attrs + $listeners（透传）

7、vuex

根据组件之间的关系组件通信方式包括

• 父子组件：props / $emit / $parent /ref
• 兄弟组件：$parent / eventbus / vuex
• 跨层级关系：eventbus /vuex /provide+inject（依赖注入）/$attrs + $listeners（透传）/$root

1、props / $emit （父子通信）

父组件向子组件传递数据是通过props传递的。

//子组件Son.vue
<template>
  <div id="son">
    <p>{{ msg }}</p>
    <button @click="fn">props</button>
    <button @click="changeMessage">$emit</button>
  </div>
</template>
<script>
export default {
  name: "son",
  props: ["msg", "fn"],
  methods: {
    changeMessage() {
      this.$emit("changeMsg", "hello父组件");
    }
  }
};
</script>

//父组件
<template>
  <div id="father">
    <son :msg="msg" :fn="myFunc" @changeMsg="changeMsg"></son>
  </div>
</template>

<script>
import son from "@/components/Son.vue";
export default {
  name: "father",
  components: {
    son
  },
  data() {
    return {
      msg: "父组件"
    };
  },
  methods: {
    myFunc() {
      console.log("父组件方法");
    },
    changeMsg(val) {
      this.msg = val;
    }
  }
};
</script>

vue---父子传值：props与this.$emit()_vue获取父类属性值_maidu_xbd的博客-CSDN博客在vue中，属性props用来实现将父组件的数据传递给子组件。当父组件的属性变化时，将传递给子组件。父组件通过prop向子组件传递数据，子组件可以通过调用内建的$emit方法来触发一个事件https://blog.csdn.net/maidu_xbd/article/details/89134193

2、$root、 $parent / $children(vue3废弃)

子组件通过$root 访问根组件的属性或方法 this.$root.msg; this.$root.myFunc();

子组件通过$parent访问父组件的属性或方法 this.$parent.msg; this.$parent.myFunc();

父组件通过$children访问子组件的属性或方法 this.$children[0].name; this.$children[0].sayHi();

3、ref/$refs

父组件可以通过$ref访问子组件

注意：$refs 只能在 mounted 生命周期钩子函数被调用之后才能使用。

4、EventBus （$emit / $on）

// event-bus.js
 
import Vue from 'vue'
export const EventBus = new Vue()

//组件a
<template>
  <div>
    <button @click="add">点击增加</button>    
  </div>
</template>
 
<script>
import {EventBus} from './event-bus.js' // 引入事件中心
 
export default {
  data(){
    return{
      num:0
    }
  },
  methods:{
    add(){
      EventBus.$emit('addition', {
        num:this.num++
      })
    }
  }
}
</script>

//组件b
<template>
  <div>求和: {{count}}</div>
</template>
 
<script>
import { EventBus } from './event-bus.js'
export default {
  data() {
    return {
      count: 0
    }
  },
  mounted() {
    EventBus.$on('addition', param => {
      this.count = this.count + param.num;
    })
  }
}
</script>

依赖注入：声明了当前组件依赖的父组件们（直系的祖宗）的外部prop有哪些。

vue里面的provide和inject是对$parent的一种优化封装

provide和inject需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效

6、$attrs + $listeners（透传）

通过  v-bind=“$attr”  来传递父组件上的prop class 和 style ,通常配合 inheritAttrs 选项一起使用，多余的属性不会被解析到标签上。

通过  v-on=“$listenser” 来传递父组件上的事件监听器和事件修饰符

子组件对el-input进行二次封装

<template>
  <div>
    <el-input v-bind="$attrs" v-on="$listeners"></el-input>
  </div>
</template>
<script>
export default {};
</script>
<style lang="less" scoped>
/deep/ .el-input__inner {
  border-top: none;
  border-left: none;
  border-right: none;
}
</style>

父组件

<template>
  <div>
    <s-input v-model="value" @blur="onBlur"></s-input>
    {{ value }}
  </div>
</template>
<script>
import SInput from "@/components/SInput.vue";
export default {
  name: "attrs",
  data() {
    return {
      value: "aaa"
    };
  },
  components: {
    SInput
  },
  methods: {
    onBlur() {
      console.log("blur");
    }
  }
};
</script>

7、vuex