[英]Vue.js dynamic components - passing data
I'm new to Vue.js. 我是Vue.js的新手。 I followed the tutorial here - https://coligo.io/dynamic-components-in-vuejs/ - on dynamic components, to give me a dynamic layout I liked, for listing products and allowing the user to switch to an edit view when they click on one of the products in the table.
我按照这里的教程 - https://coligo.io/dynamic-components-in-vuejs/ - 关于动态组件,给我一个我喜欢的动态布局,用于列出产品并允许用户切换到编辑视图时他们点击表格中的一个产品。 So, I have a 'list-products' component and an 'edit-product' component, and which one is displayed is dependent on the state of 'currentView' in the main Vue instance.
所以,我有一个'list-products'组件和一个'edit-product'组件,显示哪一个组件取决于主Vue实例中'currentView'的状态。
<div id="content">
<keep-alive>
<component :is="currentView"></component>
</keep-alive>
</div>
The switching is all working fine when currentView is changed. 当currentView被更改时,切换工作正常。 What I haven't got figured out is how best to pass the product information to the edit component such that it ends up as data.
我还没想到的是如何最好地将产品信息传递给编辑组件,使其最终成为数据。 I suppose the list and edit components are two sibling components of the main Vue instance, instantiated at the same time.
我想列表和编辑组件是主Vue实例的两个兄弟组件,同时实例化。 What I need to do is when I click on a row in listing table, have the product object used for building that row made available to the edit component.
我需要做的是当我单击列表中的一行时,让产品对象用于构建该行可用于编辑组件。 I'm not sure how I do that (at least, in a proper Vue way).
我不知道我是怎么做到的(至少,以适当的Vue方式)。 When the displayed component is switched (via the change in 'currentView'), is some event called for the newly (re)displayed component?
当切换显示的组件时(通过'currentView'的更改),是否有一些事件要求新(重新)显示的组件? If so, I could presumably call some function?
如果是这样,我可能会调用某些功能?
LATER: I have determined that the 'activated' hook is called when I switch to the edit-product component, which I imagine I should be able to use somehow. 后来:当我切换到编辑产品组件时,我已经确定调用了'激活'钩子,我想我应该能够以某种方式使用它。 Now to figure that out.
现在想出来。
You could use Vuex for that. 你可以使用Vuex 。 Vuex is a Flux inspired state management library for Vue.
Vuex是Vue的Flux灵感状态管理库。
Your application basically has two different states: (1) no product selected ( list-products
component), and (2) any product selected ( edit-product
). 您的应用程序基本上有两种不同的状态:(1)未选择产品(
list-products
组件),以及(2)选择的任何产品( edit-product
)。 When this is modeled with Vuex, the idea is to keep the currently selected product in a so-called store and let the components figure out their internal state depending on the store state. 当使用Vuex建模时,我们的想法是将当前选定的产品保留在所谓的商店中,让组件根据商店状态确定其内部状态。 Here's an example:
这是一个例子:
Create a store to keep the application state: 创建商店以保持应用程序状态:
const store = new Vuex.Store({
state: {
selectedProduct: null
},
getters: {
selectedProduct: state => state.selectedProduct
},
mutations: {
selectProduct: (state, data) => state.selectedProduct = data
}
});
Handle product selection in your list-products
component: 处理
list-products
组件中的产品选择:
methods: {
selectProduct(product) {
this.$store.commit('selectProduct', product);
}
}
Display the current product in edit-product
: 在
edit-product
产品中显示当前edit-product
:
Vue.component('edit-product', {
store,
template: '<div>{{selectedProduct.name}}</div>',
computed: Vuex.mapGetters(['selectedProduct'])
});
And finally switch the components depending on the state: 最后根据状态切换组件:
new Vue({
el: '#app',
store,
computed: Object.assign(Vuex.mapGetters(['selectedProduct']), {
currentView() {
return this.selectedProduct ? 'edit-product' : 'list-products'
}
})
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.