使用vue-router从$root实例向子组件传递动态prop

Question

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

$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路由器提供的子组件：

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

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

传递一个静态道具给我留下了同样的问题。

我怎样才能把道具传递给孩子，同时仍然保持道具的反应性？

Answer 1

将道具传递到

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

在目标组件中：

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

Answer 2

此解决方案使用状态模式来解决问题。

假设有一个简单的计数器应用程序，其中有一个显示当前值的文本和一个按钮，用户每次单击该按钮时，该按钮都会增加当前值。

将状态提取为常量：

const counter = {
    value: 0
}

export { counter };

然后，您可以导入子组件并直接使用Vue对其进行变异：

<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>

请参阅下面的图片示例的行为：

注意：这只会起作用，因为这两个组件正在变异相同的对象并触发事件以刷新自身。如果在组件外部增加计数器值，则不会看到刷新，这可以通过vuex解决。

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

Vuex是一个用于Vue.js应用程序的状态管理模式库。它作为应用程序中所有组件的集中存储，规则确保状态只能以可预测的方式突变