亲宝软件园·资讯

展开

vue中的依赖注入provide和inject简单介绍

萤火之森-Thezero 人气:0

vue中的依赖注入 provide 和 inject

vue中的依赖注入 provide 和 inject

在这里插入图片描述

provide 选项允许我们指定我们想要提供给后代组件的数据/方法。

下面是一个组价刷新的案列

<template>
  <div >
    <div class="view">
      <router-view v-if="isRouterAlive"></router-view>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isRouterAlive: true
    }
  },
  provide() {
    return {
      reload: this.reload
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function() {
        this.isRouterAlive = true
      })
    }
  }
}

然后在任何后代组件里,我们都可以使用 inject 选项来接收指定的我们想要添加在这个实例上的属性:

inject: ['reload']

注:依赖注入所提供的属性是非响应式

vue中的依赖注入provide和inject场景解析(简单易懂)

本文开始,首先我们来看这两个词的意思,provide:提供 inject:注入

用处:

父组件可以向其所有子组件传入数据,而“不管子组件层次结构有多深(非父子和父子咱都能传)”

特性:

父组件有一个provide选项来提供数据

子组件有一个inject选项来开始使用这个数据

本文参考组件层级:

Index组件

\ A组件

\ B组件

代码区:

场景1:我想要Index组件直接给b组件传值

Index组件代码:

<template>
  <div>
    <div>我是index组件</div>
    <A></A>
  </div>
</template>

<script>
import A from '@/components/A.vue'

export default {
  components: {
    A
  },
  data() {
    return {}
  },
  provide: {
    text: '我是父组件的provide信息666'
  }
}
</script>

<style></style>

接收的B组件代码:

<template>
  <div>
    <div>我是B组件</div>
    <div>{{ msg }}</div>
  </div>
</template>

<script>
export default {
  name: 'B',
  data() {
    return {
      msg: this.text
    }
  },
  inject: ['text']
}
</script>

<style></style>

当然,provide还有第二种写法,写成函数的形式

Index组件代码:

<template>
  <div>
    <div>我是index组件</div>
    <A></A>
  </div>
</template>

<script>
import A from '@/components/A.vue'

export default {
  components: {
    A
  },
  data() {
    return {
      arr: ['1', '2', '3']
    }
  },
  // provide: {
  //   text: '我是父组件的provide信息666'
  // }
  provide() {
    return {
      arr: this.arr
    }
  }
}
</script>

<style></style>

B组件代码:

<template>
  <div>
    <div>我是B组件</div>
    <div>{{ msg }}</div>
    <ul v-for="(item, index) in arr" :key="index">
      <li>{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'B',
  data() {
    return {
      msg: this.text
    }
  },
  inject: ['arr']
}
</script>

<style></style>

运行截图:

对比:

如果使用常见的props方式传值需要:index->a->b

如果使用provide/inject方式传值:index->a index->b

本文如有错误,还望各位批评指针,希望能帮助到大家更好的理解vue的provide和inject

加载全部内容

相关教程
猜你喜欢
用户评论