У меня есть компонент со следующим шаблоном:
<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
}
}
Вы можете использовать динамические компоненты и передать 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>