概述

provide/inject：简单的来说就是在父组件中通过provide来提供变量，然后在子组件中通过inject来注入变量。

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

写法

provide：选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性

// 传入对象写法
provide: {
    foo: 'bar'
}
// 函数写法
provide () {
    return {
      foo: 'bar'
    }
}

inject ：一个字符串数组，或一个对象，对象的 key 是本地的绑定名

// 父级组件提供 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}
// 子组件注入 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}

实现 provide / inject 可监听

提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

// App.vue 组件 (父组件)
export default {
        name: 'electron-xdf',
        data () {
            return {
                asideW: '200px',
                _path: null
            };
        },
        created () {
            this._path = this.$route.path;
        },
        provide() {
            return {
                INFO: this // 传递可响应对象
            };
        },
        methods:{
            upprovide(){
                this.asideW = '500px';  // 修改 属性值得变化，可以传递到 子孙后代的任意组件 同时响应变化
            }
        }
    }
// 子组件
export default {
        props: {},
        computed: {},
        name: 'process-communication',
        data () {
            return {
                count: 0
            };
        },
        inject: ['INFO'],
        methods: {
            upprovide(){
                // 这里修改之后 App.vue 也会响应数据的变化
                this.INFO.asideW = '200px';
            }
        }
    };

#

刷新vue组件

这样实现了子组件调取reload方法就实现了刷新vue组件的功能,个人认为它实现了组件跨越组件传递数据方法。

// App.vue 组件 (父组件)
<template>
  <div
    id="app"
  >
    <router-view
      v-if="isRouterAlive"
    />
  </div>
</template>
<script>
export default {
  name: 'App',
  components: {
    MergeTipDialog,
    BreakNetTip
  },
  data () {
    return {
      isShow: false,
      isRouterAlive: true
  },
// 父组件中返回要传给下级的数据
  provide () {
    return {
      reload: this.reload
    }
  },
  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方法
  inject: ['reload'],
  components: {
    PopupAssign
  },
methods: {
    // ...mapActions(['freshList']),
    async successHandle () {
      this.reload()
    }
  }
}
</script>