Как визуализировать компонент из компонента в VUE JS

1

У меня есть компонент со следующим шаблоном:

    <div v-for:"item in store" v-bind:key="item.type">
       <a>{{item.type}}</a>
    </div>

У меня есть еще один компонент под названием "StoreComponent". При щелчке элемента в первом компоненте я хочу очистить текущий компонент и показать StoreComponent и передать элемент item.type в StoreComponent.

Я не хочу использовать router-link или router.push, поскольку я не хочу создавать новый url, но переопределяю текущий компонент с новым в зависимости от значения item.type.

StoreComponent.vue

     export default{
        name: 'StoreComponent',
        props: ['item'],
        data: function () {
          return {
             datum: this.item
           }
        },
       methods: {
          //custom methods
       }
    }
Теги:
vue.js
vue-router
vuejs2
vue-component

1 ответ

2
Лучший ответ

Вы можете использовать динамические компоненты и передать item-type в качестве prop.

Vue.component('foo', {
  name: 'foo',
  template: '#foo'
});

Vue.component('bar', {
  name: 'bar',
  template: '#bar',
  props: ['test']
}); 

new Vue({
  el: "#app",
  data: {
    theComponent: 'foo',  // this is the 'name' of the current component
    somethingWeWantToPass: {
    	test: 123 // the prop we are passing
    },
  },
  methods: {
    goFoo: function() {
    	this.theComponent = 'foo';
    },
    goBar: function() {
    	this.theComponent = 'bar';
    },
  }
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
  <button @click="goFoo">Foo</button>
  <button @click="goBar">Bar</button>
  <component :is="theComponent" v-bind="somethingWeWantToPass"></component>
</div>


<template id="foo">
  <div>
    Foo
  </div>
</template>

<template id="bar">
  <div>
    Bar
    <div>This is a prop:  {{ this.test }}</div>
  </div>
</template>
  • 0
    Так что для проектов webpack, разве вы не должны иметь только один шаблон и тег скрипта в каждом файле .vue?
  • 0
    и реквизиты для привязки являются динамическими в зависимости от шаблона по умолчанию, как в вашем случае это foo, поэтому данные должны передаваться из foo на основе текущего элемента, который он обрабатывает.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню