I'm new to vue, and what i would really want to do is to have the possibility to insert a component into another component, without knowing the name of the component.
What i can do, at the moment, is to create a component "componentA" in which i make use of another component "componentB".
However, my goal would be to have componentA declare that it wants to use some component, when it doesn't yet know the component's name. Then, obtain the component's reference through props (or wherever) and use it.
In the same way that, through props, a component can obtain information without knowing what it's gonna be, i would like to know if the component can receive another component and make use of it, without knowing what the component is gonna be.
Is there a way to achieve this in vue.js?
Edit: It can be done by using Dynamic Components. Thank for providing the answer in the comments.
Related
I am about to create a Vue.js project and i use the smart/dumb pattern for my ui components. In my dumb components I have already the input, buttons and etc..., but in my smart components I am curios if it is really necessary to create a component if i will use that only in one page. For example. login-form component, then i will use that only in login page. So, ⤵️
My first question, is it really necessary to create a component for that ?
Second question, and when will i gonna create a smart components?
Moving code to another components makes code of initial component more readable. Even if you are going to use that new components only once.
Usually smart components - are pages that fetch or simply share some data to its children.
I need to have a component, where I get the type of another component that this component should create. (it could be one of n different elements) Doing this in the component's render function is not a problem, but since I am new to Vue and I am trying to do things the Vue way, not the way I would do it in React.
I have not been able to find any solution with just using a Vue template. Is there one?
This is how I would like to be able to use the component:
<factory elm="first-component"></factory>
The factory should then internally in some way result in this:
<first-component></first-component>
(it should also be able to add attributes to the component, but that I know how to do, so a suggested solution does not need to care about attributes)
There is <component :is="myCoolComponent"></component> that will basically generate <my-cool-component></my-cool-component>.
Is it what you're looking for?
From the documentation: https://v2.vuejs.org/v2/guide/components-dynamic-async.html#keep-alive-with-Dynamic-Components
You could also totally create a Factory.vue component and put that kind of logic inside of it (<component :is="" ...>).
I have a VueX state that contains a list of items. E.g.:
{
operations: Operation[]
}
We need to display each Operation as an item in a list. So we have an OperationList component and an OperationItem component.
When it comes to rendering the list (v-for), would it be recommended to pass the entire item as a prop or just the id and have the OperationItem read the data from VueX?
Basically:
<operation-item v-for="operationId in operationIds" :id="operationId" :key="operationId"/>
vs
<operation-item v-for="operation in operations" :operation="operation" :key="operation.id"/>
I think it might be a preference choice but in my projects I usually pass all the prop of the components that way :
<operation-item
v-for="operation in operations"
:key="operation.id"
:prop1="operation.prop1"
:prop2="operation.prop2"
:prop3="operation.prop3"
/>
I'm not sure if that's a good practice or not but in this case, it's more flexible, you don't need to give a structured object for it to render, you just have to give it all it's properties.
A bit like for a class constructor, I would pass all the necessary parameters separately instead of passing them in an $option array or Settings class.
For some components, it also doesn't make sense for them to be aware of the store, they should juste be "stupid" rendered components.
I hope it's clear enough that you get my point !
I'd say pass the entire item. That way your component doesn't need to know where the data came from and you would be able to reuse the component in situations where the data didn't come from Vuex.
mount on a component does not fire for v-bind changes to the component in the root.
I have a dynamic component where I often change the value of the data referenced in v-bind:is and v-bind attributes, switching the current component and its data. This works great to show different "screens" of my application.
I have some logic that happens on mount for many of the components. However, this only gets called when the v-bind:is value is changed, but no when only the v-bind attribute is. That sort of makes sense to me, though I do need to capture either.
I'm new to Vue and there is a lot of documentation. I'm so far unable to determine if there's a built-in functionality for a callback to v-bind:is and v-bind. Can anyone help me out here?
This is kinda a vague question
I have a React Native component that is going to be used in a ListView, each one is going to be slightly different in the sense that each component is populated different information in its props, each component also needs a mobx store to help pass information. Is there a way to dynamically create Mobx stores so each component has a Mobx store?
I was almost thinking like have a base mobx store class that each component uses, but not sure if this is the correct approach
When I understand your question right, you have the same data, but every list shows this data in a different way?
For that case you would create a computed prop for every list.
Fetch the data once, store it in a observable prop but let your lists use the computed props. In the computed props transform or do whatever you want with the fetched data.
https://mobx.js.org/refguide/computed-decorator.html#-computed