一分钟速通vue中的provider

Gamma Ray Burst

于 2020-07-07 08:47:31 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue js 文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_39224645/article/details/107173259

vue 同时被 2 个专栏收录

5 篇文章

订阅专栏

4 篇文章

订阅专栏

本文详细介绍了Vue.js中Provide与Inject的功能和用法，通过实例演示了如何在父组件中提供变量，并在任意层级的子组件中注入并使用这些变量，突破了传统prop属性传递的限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

provider/inject：简单来说就是在父组件 provide 中提供变量，子组件 inject 中来注入，然后可以在子组件内部使用 provide 的变量

需要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。
App.vue

<template>
  <div id="app">
    <div>
      <second/>
    </div>
  </div>
</template>
 
<script>
import second from './components/Second'
  export default {
    name: 'app',
    components: {
      second
    },
    provide: {
      test: 'App 根组件的 provide'
    },
    data() {
      return {
      }
    },
    methods: {
    }
  }
</script>
 
<style>
</style>

Second.vue

<template>
    <div>
      <p>second: {{ test }}</p>
      <third/>
    </div>
</template>
 
<script>
import third from './Third.vue';
  export default {
    name: 'second',
    components: {
        third
    },
    inject: ['test'],
    data() {
      return {
         
      }
    },
    methods: {
     
    }
  }
</script>
 
<style>
</style>

Third.vue

<template>
    <div>
      <p>third: {{ test }}</p>
    </div>
</template>
 
<script>
  export default {
    name: 'third',
    components: {},
    inject: ['test'],
    data() {
      return {
         
      }
    },
    methods: {
     
    }
  }
</script>
 
<style>
</style>