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

Posted 2023-02-22

【中文标题】将道具数据传递给我只能通过路由访问的组件

【英文标题】：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 对象

【参考方案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://***.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>