Vue中provide inject传值给子组件,子路由方法

vue共享父组件里面的动态数据，数据定义于data 或者 store。 父组件数据发生变化，需要同步到子孙组件里面。做法: 将一个函数赋值给provide的一个值，这个函数返回父组件的动态数据，然后在子孙组件里面调用这个函数。

App.vue

<template>
  <div id="app">
    <!-- 改变 loginName值-->
    <button @click="changeVal()">改变</button>
    <!-- 这里使用路由 也可以用父子组件 -->
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>
<script>
export default {
  name: 'App',
  // 函数赋值给provide的一个值
  provide() {
    return {
      provideLoginName: () => this.loginName
    }
  },
  data() {
    return {
      // 控制路由显示
      isRouterAlive: false,
      loginName: ''
    }
  },
  created() {
    this.getloginName()
  },
  methods: {
    // 改变值,子组件或子路由也发生变化
    changeVal() {
      this.loginName = '张三'
    },
    getloginName() {
      // 可执行异步方法 ...
      //  赋值登录名称
      this.loginName = '登录名'
      // 显示子路由
      this.isRouterAlive = true
    }
  }
}
</script>

childRouter

<template>
  <div>
    <div v-if="loginName()">
      <span>欢迎您:{{ provideLoginName() }}</span>
    </div>

    <!-- 其他代码 -->
  </div>
</template>

<script>
export default {
  inject: ['provideLoginName']
}
</script>