vue高階用法之provide與inject

1、這個兩個必須同時使用，當父組件定義的方法，子組件也想使用怎么辦了，這時候就可以派上用場了

provide：Object | () => Object
inject：Array<string> | { [key: string]: string | Symbol | Object }

父組件中

<template>
  <div
    id="app"
  >
    <router-view
      v-if="isRouterAlive"
    />
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
  
  },
  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>

　這樣就實現了子組件調取reload方法就實現了刷新vue組件的功能,個人認為它實現了組件跨越組件傳遞數據方法。