I'm a little new in VueJS and communicate between components is heavy to understand without a Bus or Vuex.
I have 3 components: CompForm, CompField and CompText.
CompForm is a wrapper with that cointain a lot of CompField. Here I have a data "form: {}".
CompField have a <component :is...> that call a component by a prop.
CompText is a component that is called by CompField
How I can pass the data of CompText to CompForm? I try with :value, #input, slot-scoped, emit and nothing works (Or I'm using it wrong). At this moment I can comunicate CompText to CompField, but I cant to CompField to CompForm.
I did a sandbox with that working:
https://codesandbox.io/s/n0yq3jyz7p
It's good that I'm doing? or is better that I use Vuex? Or other way?. Any suggestion is welcome :D
The idea es make a form with a lots of field type dynamic and create a form very easy way.
Thanks everyone.
Related
I'm having a situation where I use a specific Vue component in multiple ways. Sometimes I initialize it as an SPA with new Vue({store}) and sometimes I use it from within another vue component.
E.g.
<template>
<component/>
</template>
How would I go about attaching a vuex store to the component in the above situation? Manually overriding the $store property obviously does not work and the Vue instance itself doesn't really shed any light on the matter. Is there a way to achieve this?
I've written a simple store factory which creates a new instance of the vuex store but I need a way to attach this to a component from within a vue template/comp.
Said component is complex enough to warrant vuex.
Apparently setting the $store property manually does do the trick.
this.$store = store
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'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.
I have component nabber/header that has a props, and I want to put the props in that component and then want to use that props on another props, how to put that props to get that data and transfer it to another component ? because I want to use that props to CRUD in database ? is that possible that we use $root to get that props which we put on App.vue ??
my components
header = [ props : 'list' ]
shop = add to cart, ( this which I want to transfer it to props list ) and go CRUD , is that possible ??
I suggest learning a bit more about Vuex to solve this problem.
This will give you a logical place to define database related actions that can also provide reactive data to components that will display it. Even if you're relatively new to Vue, learning Vuex sooner rather than later will payoff.
It may also be possible for you to use v-model to extricate some data from one component... but what you've described seems a bit different. It might be worth looking at how to implement v-model on your own components as you become more familiar with Vue!
I was Vue.js now for a project and created and used a lot of components.
Now I started to have the problem of having too many eventemitters and props that I need to keep track of.
I guess to illustrate the problem the best I will use an example:
Lets say you have a main.vue and 2 or 3 Components.
One contains a button that should manipulate the other 2 components or switch them out.
Now I need to emit an event to the main.vue and then main.vue has to change a binded variable and pass props down to the other 2 components.
Alright: Now lets put the button in a component of of a component. You need to make sure that every link between a parent and a child is correct.
Now create a bit project and put a button in another components and you have to change everything.
So is there a good way to avoid this?
Something like a broadcast function so that every component is receiving the event?
Or a Manager that is handling the communication of all components?
use a flux pattern (vuex)
At first you may think that this does not really answer the question, since it deals with storage of data, and not handling of events. The flux pattern changes the architecture of your application by creating a single store (think database) that all components can read and write from. Coupled with the reactive nature of the reactive frameworks such as vue (or react), the components will react to a change in data. So instead of tightly coupling component A to D through B and C, you'd have component A listen to mutations in object X, and component D makes changes to object X. When the change happens, component A gets updated without having to listen to any of the children's $emit functions firing. At first it may seem daunting, but the investment is worthwhile.