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

【问题标题】：Passing a dynamic prop from $root instance to child component using vue-router使用 vue-router 将动态道具从 $root 实例传递给子组件
【发布时间】：2021-04-03 09:58:44
【问题描述】：

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

$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的方法。然而，这使得道具无状态，并且不保留反应性。它只会在页面刷新时更新道具。

传递静态道具让我遇到同样的问题。

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

【问题讨论】：

你真的需要通过 url 使用 prop/传递给 vue-router 吗？我问这个是因为有一种方法可以将数据提取到 const（反应性）并在根和子组件中使用而不使用 prop
从技术上讲，我需要从父/$root vue 实例向 vue 路由器服务的子组件发出事件。传递响应式道具被用作桥接两个组件的标志，以便从 $root/parent 触发子级事件。只要我可以在两个组件之间保留某种反应性数据元素，就不需要通过路由器传递道具。

标签： javascript vue.js vuejs2 vue-component vue-router

【解决方案1】：

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

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

将状态提取为常量：

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 应用程序的状态管理模式 + 库。它充当应用程序中所有组件的集中存储，其规则确保状态只能以可预测的方式发生变化

【讨论】：

【解决方案2】：

将 props 传递到 <router-view/> 并在孩子中捕获它们

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

在目标组件中：

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

【讨论】：