浅谈vue非父子组件通信

2022-06-22 本文已影响0人壮壮仔儿

我们实际编写项目时往往离不开组件之间的相互通信，但是这之间如何通信呢？一般大家可能首先想到props，或者是vuex，今天老将军换个新把式，咱说下另外两个

provide和inject
mitt
ok，先说第一个，provide和inject。
它用于父组件向子孙组件传递数据，provide在父组件中提供要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等下级组件中使用数据。
可能会有小伙伴有疑问那我props也是一样的啊，那试想一下我们有一个大型组件树，并且一个深度嵌套的组件需要来自远距离祖先组件的数据。如果使用 props，我们就需要在整个父链中传递相同的 props，那不忒麻烦了，自己都写不耐烦了而且容易出错。在此简单举例：

props1.png

改为Provide / Inject方式后

props2.png
具体代码

//APP.vue
......
  provide() {
    return {
      name: "leah",
      age: 883,
    };
  },

//HomeContent.vue
<script>
    export default {
        inject:["name","age"]
    }
</script>

provide可以使用对象形式，但是如果我们需要提供每个实例的状态，例如通过声明的数据data()，那么provide必须使用函数值。此外，如果为了使provide链接到data中的数据，我们需要使用computed()函数提供一个计算属性

 provide() {
    return {
      message: computed(() => this.xxx)
    }
  }

大家都知道props是有默认值的，在没有值传递过来时默认数值是多少，那inject有没有呢，答案是有的，如果我们provide没有传递值时HomeContent.vue可以改为

export default {
  inject: {
    name: {
      default: "leah",
    },
    age: {
      default: "12",
    },
  },
};

如果想使用别名，下面是将name改为testName，如果再使用，那就不是用this.name，而是this.testName

  inject: {
    testName: {
      from: "name",
      default: "12313",
    },
  },

接下来再说一下mitt，vue2.x有EventBus，3把它去掉了。我们可以使用mitt创建一个3的事件车。mitt是一个体积极小的第三方消息发布/订阅式JavaScript库，与框架无关，所以不论是React还是Vue都可以用，示例：

//导入
import mitt from "mitt"
const emitter=mitt()
export default emitter
//用法
import emitter from "xxx";
//触发调用
emitter.emit("clickMe", { xx:xxx });
//监听某一emitter
emitter.on('clickMe', clickMe)   // listen
//监听所有emitter
emitter.on('*', (type, e) => console.log(type, e) ) //type为方法名，e为传递的数据
//取消所有emitter监听
emitter.all.clear()
//创建及移除
function clickMe {}
emitter.on('clickMe', clickMe)   // listen
emitter.off('clickMe', clickMe)

铛铛铛～撒花完结🎉，如有不对，欢迎指正

浅谈vue非父子组件通信

猜你喜欢

热点阅读