将道具数据传递给我只能通过路由访问的组件答案

【问题标题】：passing props data to component which i can only access with routes将道具数据传递给我只能通过路由访问的组件
【发布时间】：2019-04-07 22:20:59
【问题描述】：

我的路由器文件

import DomainAction from './components/domainaction/DomainAction.vue'
...
{ path: '/domainaction' , component: DomainAction },
...

路由器链接文件

...
<router-link to="/domainaction" tag="li" class="list-group-item "class-active="active" exact > Domain Action</router-link>
...

从另一个路由到 domainaction 路由这样

...

itemAction(action,data){
          if(action=='Suspend'){
            this.$router.push('/domainaction')
          }
        }
...

我的实际 DomainAction 组件

<template>
.......
</template>
<script>
export default {
  props:['data'],
  data(){
    return{
.........
</script>

我想从 itemAction 函数传递数据道具。我如何做到这一点？我是 vue js 新手。如果我的问题不是很完整，请见谅。

【问题讨论】：

数据属性中有什么？那么你需要向组件传递哪些数据呢？
@VladislavLadicky 来自函数itemAction(action,data) 我想将这个data 传递给domainAction 组件，这是一个json 对象

标签： javascript vue.js vue-router

【解决方案1】：

如果你只需要传递一个属性（一个值）给组件，你只需要使用通过路由器的 props 传递的数据：https://router.vuejs.org/guide/essentials/passing-props.html#function- 模式。并在组件内使用this.$router 接收。或者，您可以使用 Vuex 进行数据传递。 https://vuex.vuejs.org/ 这样您就可以在通知的此表单之外的组件之间进行通信，两个组件都必须是父组件和子组件，即 1 在其中调用另一个组件，所以是的，您可以传递值，否则应该使用它，或者通过路由或通过 vue 状态管理器 vuex 的数据路径。根据这个问题的要求，还有以下可能性。 Passing props to Vue.js components instantiated by Vue-router

【讨论】：

【解决方案2】：

你应该使用 vuex

props 旨在将变量从父组件传递到子组件，
所以当你想在页面之间共享数据时使用它是不常见的。

prop的正确用法示例：
父.vue

<child-component :data="data">
<child-component :data="anotherData">

所以，如果您想在页面之间共享变量，请改用 vuex（存储模式）。

类似问题：
https://stackoverflow.com/a/40955110/10440108

【讨论】：

【解决方案3】：

请注意，sosmii 关于使用 Vuex 跨组件共享数据是正确的。

但是，如果您正在考虑使用路由将 soma 数据作为参数传递，则必须稍微更改定义组件路由的方式。使用路由器参数，您将能够传递道具，然后您可以推送路由并添加参数。请参见下面的示例。

以及相关问题： Passing props with programmatic navigation Vue.js

const DomainActionA = {
  props: ['dataProp'],
  template: '<div>A data: {{dataProp}}</div>'
 }
const DomainActionB = {
  props: ['dataProp'],
  template: '<div>B data: {{dataProp}}</div>'
 }

const routes = [
  {
    path: '/DomainActionA/:dataProp',
    name: 'domainA',
    component: DomainActionA,
    props: true },
  { 
    path: '/DomainActionB/:dataProp',
    name: 'domainB',
    component: DomainActionB,
    props: true
   }
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router,
  methods: {
    goToA() {
       this.$router.push({name: 'domainA', params: {dataProp: "blah"}})
    },
    goToB() {
       this.$router.push({name: 'domainB', params: {dataProp: "bleh"}})
    }
  }
}).$mount('#app')

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
  <h1>Hello Router!</h1>
  <div>
   <button @click="goToA()">Go A with params: { data: "blah" }</button>
   <button @click="goToB()">Go B with params: { data: "bleh" }</button>
  </div>
  <div>
    <h2>router view</h2>
    <router-view></router-view>
  </div>
</div>

【讨论】：