如何将导航道具传递给子组件？

// 父组件
<template>
  <div>
    <ChildComponent :navigationProps="navigationProps" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      navigationProps: '导航道具数据'
    };
  },
  components: {
    ChildComponent
  }
};
</script>

// 子组件
<template>
  <div>
    <p>{{ navigationProps }}</p>
  </div>
</template>

<script>
export default {
  props: ['navigationProps']
};
</script>

// 父组件
<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  provide: {
    navigationProps: '导航道具数据'
  },
  components: {
    ChildComponent
  }
};
</script>

// 子组件
<template>
  <div>
    <p>{{ navigationProps }}</p>
  </div>
</template>

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

// 安装Vuex
npm install vuex

// 创建store.js文件
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    navigationProps: '导航道具数据'
  },
  mutations: {},
  actions: {},
  getters: {}
});

// 在main.js中引入store.js
import Vue from 'vue';
import App from './App.vue';
import store from './store';

new Vue({
  store,
  render: h => h(App)
}).$mount('#app');

// 子组件
<template>
  <div>
    <p>{{ navigationProps }}</p>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['navigationProps'])
  }
};
</script>