亲宝软件园·资讯

展开

vue中provide和inject用法 vue2.0/3.0中provide和inject的用法示例

大鹏_yp 人气:0
想了解vue2.0/3.0中provide和inject的用法示例的相关内容吗,大鹏_yp在本文为您仔细讲解vue中provide和inject用法的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue中provide的用法,vue,provide和inject用法,vue中provide和inject的坑,下面大家一起来学习吧。

1、provide/inject有什么用?

常用的父子组件通信方式都是父组件绑定要传递给子组件的数据,子组件通过props属性接收,一旦组件层级变多时,采用这种方式一级一级传递值非常麻烦,而且代码可读性不高,不便后期维护。

vue提供了provide和inject帮助我们解决多层次嵌套嵌套通信问题。在provide中指定要传递给子孙组件的数据,子孙组件通过inject注入祖父组件传递过来的数据。

使用场景:由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问祖先组件的数据

2、provide/inject使用方式

  provide:是一个对象 / 返回对象的函数。

       里面是属性和属性值。

  注意:子孙层的provide会掩盖祖父层provide中相同key的属性值

  inject:一个字符串数组,或者是一个对象。

     属性值可以是一个对象,包含from和default默认值,from是在可用的注入内容中搜索用的 key (字符串或 Symbol),意思就是祖父多层provide提供了很多数据,from属性指定取哪一个key;

    default指定默认值。

具体用法:

父组件

<template>
  <div>
 
  </div>
</template>

<script>
export default {
  components: {
    MergeTipDialog,
    BreakNetTip
  },
  data () {
    return {
      isShow: false,
      isRouterAlive: true
  },

// 父组件中返回要传给下级的数据  可以使函数,也可以是data中的数据
  provide () {
    return {
      reload: this.reload    isShow:this.isShow
    }
  },
  methods: {
    reload () {
      this.isRouterAlive = false
      this.$nextTick(() => {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

子孙

<template>
  <popup-assign
    :id="id"
    @success="successHandle"
  >
    <div class="confirm-d-tit"><span class="gray-small-btn">{{ name }}</span></div>
    <strong>将被分配给</strong>
    <a
      slot="reference"
      class="unite-btn"
    >
      指派
    </a>
  </popup-assign>
</template>
<script>
import PopupAssign from '../PopupAssign'
export default {
//引用vue reload方法 内容 isShow
  inject: ['reload','isShow'],
  components: {
    PopupAssign
  },
methods: {
    async successHandle () {
      this.reload()
    }
  }
}
</script>

vue3.0用法

父组件

 子组件

总结

加载全部内容

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