передача данных реквизита в компонент, к которому я могу получить доступ только с маршрутами - PullRequest
Новая
       6

передача данных реквизита в компонент, к которому я могу получить доступ только с маршрутами

0 голосов
/ 04 ноября 2018

Мой файл роутера 

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

С других маршрутов, идущих к маршруту, подобному этому 

...

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

Мой действительный компонент DomainAction 

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

Я хочу передать реквизиты данных из функции itemAction. Как мне этого добиться? Я новичок в vue js. Извините, если мой вопрос не очень полный.

Ответы [ 3 ]

0 голосов
/ 04 ноября 2018

Обратите внимание, что sosmii подходит для использования Vuex для обмена данными между компонентами.

Но если вы рассматриваете данные о передаче сома как параметры с использованием маршрутов, вам нужно немного изменить способ определения маршрутов компонентов. Используя параметры маршрутизатора, вы сможете передавать реквизиты, затем вы можете продвигать маршрут и добавлять параметры. Смотрите пример ниже.

И связанный вопрос: Передача реквизита с программной навигацией 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>
0 голосов
/ 04 ноября 2018

Что ж, если вам просто нужно передать свойство (значение) компоненту, вам просто нужно использовать данные, передаваемые через реквизиты маршрутизатора: https://router.vuejs.org/guide/essentials/passing-props.html#function- mode. И получить, используя this.$router внутри компонента. В качестве альтернативы вы можете использовать Vuex для передачи данных. https://vuex.vuejs.org/ Чтобы вы могли установить связь между компонентами вне этой формы, о которой было сообщено, оба компонента должны быть родительскими и дочерними, т. Е. 1 вызывает другой внутри него, так что да, вы можете передавать значения, в противном случае его следует использовать или путь данных через маршрут или через vuex, который является менеджером состояния vue. Существует также следующая возможность, как указано в этом вопросе. Передача реквизитов компонентам Vue.js, созданным Vue-router

0 голосов
/ 04 ноября 2018

вы должны использовать vuex

реквизиты предназначены для передачи переменных от родительского компонента к дочерним компонентам,
поэтому его необычно использовать, когда вы хотите обмениваться данными между страницами.

пример правильного использования prop:
parent.vue 

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

поэтому, если вы хотите обмениваться переменными между страницами, используйте вместо этого vuex (шаблон хранилища).

похожий вопрос:
https://stackoverflow.com/a/40955110/10440108

...