我有一个包含以下模板的组件:
<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
}
}
答案 0 :(得分:2)
您可以使用dynamic components并将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>