当前位置: 首页> 娱乐> 八卦 > Vue组件通讯⽗组件中通过 provide 来提供变量,然后在⼦组件中通过 inject 来注⼊变量例子

Vue组件通讯⽗组件中通过 provide 来提供变量,然后在⼦组件中通过 inject 来注⼊变量例子

时间:2025/9/10 14:13:21来源:https://blog.csdn.net/codemami/article/details/139212741 浏览次数:0次

在Vue中,provide 和 inject 主要用于依赖注入,允许祖先组件向其所有子孙组件提供一个依赖,而不论组件层次有多深。这在开发高阶插件/组件库时特别有用。

以下是一个简单的例子,演示了如何在父组件中使用 provide 提供变量,并在子组件中使用 inject 注入该变量:

父组件 (Parent.vue)

vue

<template>

  <div>

    <h2>这是父组件</h2>

    <child-component></child-component>

  </div>

</template>

<script>

import ChildComponent from './Child.vue';

export default {

  name: 'Parent',

  components: {

    ChildComponent

  },

  provide() {

    return {

      // 这里我们提供了一个名为'foo'的变量

      foo: 'Hello from Parent!'

    };

  }

};

</script>

子组件 (Child.vue)

vue

<template>

  <div>

    <h3>这是子组件</h3>

    <p>从父组件注入的变量: {{ foo }}</p>

  </div>

</template>

<script>

export default {

  name: 'Child',

  inject: ['foo'] // 这里我们注入了名为'foo'的变量

};

</script>

在这个例子中,父组件通过 provide 提供了一个名为 foo 的变量,子组件通过 inject 注入了该变量,并在模板中使用了它。当父组件的 foo 变量发生变化时(尽管在这个简单的例子中它并没有变化),所有注入了 foo 的子组件都会自动更新。

 

注意:虽然 provide 和 inject 绑定并不是可响应的(它们不会触发视图更新),但你可以传递可观察的对象,这样对象的属性仍然是响应的。

 

 

关键字:Vue组件通讯⽗组件中通过 provide 来提供变量,然后在⼦组件中通过 inject 来注⼊变量例子

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: