使用 vue-router 将动态道具从 $root 实例传递给子组件

Question

在使用 VueJS 时，如何在使用 $root 时将 prop 从 vue-router 视图实例传递给子组件？

$root 实例：

const router = new VueRouter({
    routes: [{
        path: "/dashboard",
        component: () => import("./User/Dashboard.vue" /* webpackChunkName: "js/components/user/Dashboard" */ )
    }]
});

var app = new Vue({
    el: '#app',
    router,
    data: () => ({
        passedProp
    }), 
});

Laravel 布局使用：

@section('content')
    <transition name="slide">
        <router-view></router-view>
    </transition>
@endsection

由 vue-router 服务的子组件：

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

查看vue-router documentation，有一种通过url传递prop的方法。然而，这使得道具无状态，并且不保留反应性。它只在页面刷新时更新 prop。

传递静态道具给我带来了同样的问题。

如何将道具传递给孩子，同时仍保持对道具的反应性？

Answer 1

此解决方案使用 State Pattern 来解决问题。

假设一个简单的计数器应用程序，有一个显示当前值的文本和一个在用户每次点击时递增的按钮。

将状态提取为常量：

const counter = {
    value: 0
}

export { counter };

然后就可以在子组件中导入，直接使用Vue进行mutate：

<template>
    <div>
        counter value from child:
        {{ counter.value }}
    </div>
    <div>
        <button type="button" @click="() => counter.value++">increment from child</button>
    </div>
</template>

<script>
import { counter }  from "/src/counter.js";

export default {
    data: () => ({ counter })
}
</script>

在根组件中，你可以做同样的事情：

<template>
    <div>
        counter value from root:
        {{ counter.value }}
    </div>
    <div>
        <button type="button" @click="() => counter.value++">increment from root</button>
    </div>

    <ChildComponent />
</template>


<script>
import ChildComponent from './components/ChildComponent.vue'
import { counter }  from "/src/counter.js";

export default {
  name: 'App',
  data: () => ({ counter }),
  components: {
    ChildComponent
  }
}
</script>

请参见下图示例的行为方式：

注意：这只会起作用，因为这两个组件正在改变同一个对象并触发事件来刷新自己，如果您在组件外增加计数器值，您将看不到刷新，这可以用 {{3} 解决}.

此外，如果这种在多个组件中控制数据的场景在您的应用程序中很常见，我也建议vuex

<块引用>

Vuex 是 Vue.js 应用程序的状态管理模式 + 库。它充当应用程序中所有组件的集中存储，其规则确保状态只能以可预测的方式发生变化

Answer 2

将 props 传入 <router-view/> 并在 children 中捕获它们

<router-view :prop1="localData"></router-view>

在目标组件中：

<template>
  <h1>
    {{ prop1 }}
  </h1>
</template>
<script>
 export default{
   props:{
     prop1: Object
   }
 }
</script>