Vue Router передает реквизиты динамически загруженным детям - PullRequest
Новая
       7

Vue Router передает реквизиты динамически загруженным детям

0 голосов
/ 02 июля 2018

Я изучаю Vue atm, и у меня возникают проблемы с передачей реквизита между дочерними и родительскими компонентами через Vue Routes. У меня есть компонент Layout, который имеет оболочку DIV и выглядит так: 

<template>
    <div class="container" v-bind:class="cssClass">
      <router-view></router-view>
    </div>
</template>

<script>
export default {
  name: 'Layout',
  props: ['cssClass']
}
</script>

и я определил свои маршруты в моем базовом приложении JS, и выглядит так, как показано ниже. Так что мой взгляд на первую загрузку имеет класс «контейнерно-анимированный», и с миром все хорошо. 

const router = new VueRouter({
    routes: [
      { path: '/', component: Layout, props: { cssClass: 'container-animated' },
        children: [
          { path: '', component: Homepage },
          { path: '/hello-world', component: HelloWorldPage, props: { cssClass: '' } }
        ]
     },
    ]
});

Однако, как только я перейду к маршруту / hello-world, я хочу передать пустой реквизит cssClass в Layout, (внутри которого сейчас находится HelloWorldPage) - как бы мне поступить? Является ли реквизит даже механизмом достижения этого?

Ответы [ 2 ]

0 голосов
/ 03 июля 2018

Я понял, является ли это оптимальным решением для моей проблемы, можно только догадываться.

Похоже, что дочерние реквизиты не поднимаются автоматически родительским элементом при передаче по Vue Router. Поэтому, когда компоненты создаются / внедряются динамически, каждый из них вызывает мое настраиваемое событие childinit, которое отправляется обратно в представление маршрутизатора, определенное в родительском элементе (Layout). Я устанавливаю локальную переменную в родительском элементе в значение испускаемого дочернего элемента, а затем привязываю к нему класс. 

const router = new VueRouter({
    routes: [
      {
        path: '/',
        component: Layout,
        children: [
          {
            path: '',
            component: Homepage,
            props: { cssClass: 'home' },
          },
          {
              path: '/helloworld',
              component: HelloWorldPage,
              props: { cssClass: 'helloworld' }
          }
        ]
      }
    ]
});

Мой компонент макета: 

<template>
    <div class="container" v-bind:class="className">
      <router-view v-on:childinit="onChildInit"></router-view>
    </div>
</template>

<script>
export default {
  name: 'Layout',
  props: ['cssClass'],
  data() {
    return {
      className : ''
    }
  },
  methods: {
    onChildInit( value ){
      this.className = value;
    }
  }
}
</script>

Компонент "Моя домашняя страница": 

export default {
  name: 'Homepage',
  props: ['cssClass'],
  created() {
    this.$emit('childinit', this.cssClass);
  }
}

Компонент HelloWorld также излучает, возможно, созданный метод не нуждается в репликации; возможно, вам стоит посмотреть, можете ли вы расширить базовый компонент, который всегда будет выдавать init для обоих компонентов.

0 голосов
/ 02 июля 2018

Позвольте мне объяснить вам, как работает VUE:

У вас есть родительский компонент. Layout.vue 

<template>
  <div id="app" class="container-fluid">
    <router-view/>
  </div>
</template>
<style>
 .container-fluid {
background-color:blue; //as defined in the parent, everything inside #app will inherit this class
}
</style>

Теперь ваш Vue-маршрутизатор должен выглядеть следующим образом: 

{
    path: '/',
    name: 'Layout',
    component: Layout,
    children: [
        { path: '', component: Create, name: 'Create' },
    ]
}

Поскольку вы определили, что внутри Layout.vue будет наследоваться все, что находится внутри .container-liquid, компонент Create будет наследовать классы, определенные в его родительском (Layout)

Надеюсь, это сработает.

С уважением,

...