vue.js 非父子通信-provide-inject

在Vue.js中,通常情况下,父组件与子组件之间的通信是通过props和$emit来实现的。但当组件之间的嵌套层级非常深,或者需要在多个组件之间共享数据时,使用props和$emit会变得非常繁琐。Vue.js提供了provide和inject这两个API来解决这个问题。

provide和inject是一对成对出现的,父组件通过provide来提供数据,子组件通过inject来注入数据。provide和inject能够实现非父子组件之间的通信,并且不受嵌套层级的限制。

下面是一个详细的使用provide和inject的示例:

父组件中使用provide提供数据:

<template>
  <div>
    <h1>Parent Component</h1>
    <p>Message: {{ message }}</p>
    <ChildComponent />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: 'Hello from parent component'
    };
  }
};
</script>

子组件中使用inject注入数据:

<template>
  <div>
    <h2>Child Component</h2>
    <p>Message: {{ injectedMessage }}</p>
  </div>
</template>

<script>
export default {
  inject: ['message'],
  computed: {
    injectedMessage() {
      return this.message;
    }
  }
};
</script>

在子组件中,使用inject选项来声明要注入的属性,这里我们声明了message属性。然后在computed属性中可以通过this.message来访问到父组件提供的数据。

通过provide和inject,父组件提供的数据可以被所有直接或间接的子组件访问到。这样就实现了非父子通信。

需要注意的是,provide和inject不是响应式的。也就是说,如果父组件的provide提供的数据发生变化,子组件不会自动更新。如果需要实现响应式,可以通过结合Vue的响应式系统来实现,例如使用vuex或者使用另外一个Vue实例作为数据中心。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ordinary90

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值