Right this is more about practice, I haven't really got a working scenario but I can provide an example. Imagine Facebook messenger, you have a chat widget in the header where you can quickly view and respond to messages. You can also click view all to take you off to the messages page.
So to me I can see myself having two Vue components, they're more sibling than parent and child as one would be used on all pages and the other simply on the messages page.
<chat></chat> and <chat-widget></chat-widget>
Now from what I can see, across the widget and the chat window itself is functions that would operate in the same way, maybe they'll have slightly different templates because of where they are loaded but somethings straight of the bat would be:
messages() {}
compose() {}
validate() {}
These are just some examples as I use Laravel as my backend I would be using axios to send requests between my Vue frontend and my backend (database).
Ideally, I wouldn't want these components to duplicate it's functions, so should I simply duplicate them or is there a way where i can store some sort of parent functions?
One problem is because of async ajax requests I can't simply call a function that returns say the messages for me to bind, at least, I don't think I can.
Just looking for some guidance on how I can best do this with Vue so that I'm not duplicating identical functionality within my components.
You can use composition to create a "base/abstract" component from which other components can extend:
https://v2.vuejs.org/v2/api/#extends
var CompA = { ... }
// extend CompA without having to call `Vue.extend` on either
var CompB = {
extends: CompA,
...
}
You can inherit the functionality from the "base/abstract" class or override parts of the functionality of the parent.
Another thing you could do is to create mixins:
https://v2.vuejs.org/v2/guide/mixins.html#ad
This is helpful if your components need to share functionality but are not largely the same. If you were to use extend in those cases you would likely override the majority of base functionality to these are a better in that case.
Of course nothing would stop you from simply extracting commonly used methods into a separate file and importing them in your components directly.
Related
I have a component library where i would like to standardize the props, component etc.
Thoughts on combining them props/methods/other mixins/etx into one larger mixin
All property names would be the same
Remove duplicated code on refactoring to adjust components from local props/methods/computed/ to "global"
Not all components would have need for every piece of data contained within the mixin - point 4
Would tree shaking remove the unused code on Rollup?
Is this a good idea?
If your component library is not constrained to using Vue 2 you might want to take a look at Vue Composition API to share functionality (methods + reactive state) between different components.
Mixins might not be what you really want to be using because you kind of lose information as to what features/props/methods really will be put inside your component without re-checking the mixin code. You also might run into issues when component options get merged by Vue at runtime. Check out these posts for more information:
https://css-tricks.com/how-the-vue-composition-api-replaces-vue-mixins/
https://reactjs.org/blog/2016/07/13/mixins-considered-harmful.html
As for sharing props: What I've seen just yesterday (but not yet tried!) in a talk by John Leider - creator of Vuetify - is create a function that returns the props you want to reuse between components. Then you just call said function inside your props definition and use the spread operator.
The Goal: Have two separate, independently navigateable routes with vue-router.
Details:
How can I have two parts of a page that are independently routed with vue router? Say you have a page split into a main view and a sidebar. The main view is what you would normally expect from a view, you click on links and it changes the path and loads a new component. The sidebar is completely separate, no matter where you are in the main view the sidebar does not change, but the sidebar also has links that let you go to different components within itself.
With vue-router, I can have named views, but these seem to be tied to whatever the current path/route is, and cannot be controlled separately.
Example Annotation:
Question
Can vue-router have two separate, and independent routes/views that are not tied to each other? If so, is there documentation on this, are there router code examples?
Note: There is no code here, it doesn't seem necessary as this isn't a code issue, it's a vue-router use-case issue.
You can achieve separate independent routes if you use 2 Vue apps each with its own router.
A small demo in this fiddle.
I've used 2 routes, one with history mode and one abstract.
The biggest problem I see with this is that, at least out of the box, you cannot have a URL that points the user to the same view(s), as now you are managing 2 different routers.
The other is related to communication, you now have 2 different Vue app instances so you need to do something about communication between them.
But this shouldn't be that hard
if you are using Vuex you can set the same store object on both of them
If you are just using a plain data object you can pass the same object to both instances and that will become reactive or
you can always communicate over the same bus
I know that Aurelia route modules can be specified dynamically using navigationStrategy but that does not work for my purposes because the toggle value resides in the RouterConfiguration that only runs once. I need a way to route to different views where the toggle value can change multiple times during one session. Additionally, not all routes have multiple views.
What is the best practice for routing to different views on the same route based on a dynamic value?
I've come up with a few different strategies but I'm not sure which one is the most acceptable way to do this.
Using viewPorts where the route will have a static moduleId to a view that injects the name into an instance of <router-view name="view1_index"></router-view> using a global string, e.g. 'view1' may be passed down as 'view2', etc.
Using 2 or more instances of <compose> where the route will again have a static moduleId to a view that will use a global variable to toggle an if.bind in the <compose> instances
Using canActivate in the route module and redirecting to the secondary viewport if conditions are met
Using a pipeline step in the router config to evaluate whether it should direct to a different module (if this is possible)
Which of these strategies, if any, is most accepted? If all of these are odd ways of routing to different views per route, what should be done?
What is the best practice for routing to different views on the same
route based on a dynamic value?
Compose is your best bet. It is common to pass a parameter to the route, capture the parameter in the activate(params) callback, set a variable on your view model using the params, and then use that variable to set the view-model attribute of <compose>.
Using a pipeline step in the router config to evaluate whether it
should direct to a different module (if this is possible)
This is very possible. A common use case is authentication, where you use the AuthorizeStep to check whether a user is authorized and redirect him away if he is not. See http://foreverframe.net/exploring-aurelia-pipelines/. This can be activated in the PreactivateStep as well.
Using viewPorts where the route will have a static moduleId to a view
that injects the name into an instance of using a global string, e.g. 'view1'
may be passed down as 'view2', etc.
I recommend against using viewports for anything other than associating routes to views on a certain section of the screen.
Edit:
A third option you might be interested in is returning a Redirect from your canActivate() function.
import { Redirect } from 'aurelia-router';
canActivate(params) {
let thing = this.thing = await this.service.getById(params.id);
if (!thing) {
return new Redirect('somewhere');
}
return true;
}
I've got an existing SPA that was developed using nested RactiveJS components. Which is great, and offers a ton of flexibility throughout the entire app. Currently I attempting to add in client side routing support using page. My navigation switches out high-level components using simple {{#visible}}{{/visible}} template markup on each component. This is a little troublesome in its current state as it always kicks off a re-render whenever the high-level component becomes visible again.
Is there a way to render a component, for example, called widget, without using the
<widget></widget>
method? I've already "registered" the component with the parent, but obviously when constructing it by means of
new App.components.widget
I am able to control how/when it's rendered/inserted/detached, but lose the recognition in the application's component hierarchy.
There is insert exactly for that. You don't even need to "register" it to the component you plan to put it to. You can use the different find* methods or nodes to easily retrieve a reference of your planned container element.
var instance = new YourDetachedWidget({ ... });
instance.insert('#your-container'); // This could be a node, selector or jQuery object
I'm a bit stuck looking for the right way to do the following. I have a parent component with two child components (see simplified code below). I would like to know the proper way for ChildA, when its button is pressed, to 'invoke' ChildB. They should communicate through the parent, but should they communicate through their controllers? In that case the parent has to pass its controller to the controllers of the children.
Parent = {
view: function () {
m.component(ChildA);
m.component(ChildB);
}
}
ChildA = {
view: function () {
m('button')
}
}
ChildB = {
view: function () {
}
}
This is really just a question of the plain javascript style you prefer. Think of communication between JS objects and how you would handle that.
Generally, Mithril devs choose between Parent/Child communication and Pub/Sub. For Parent/Children, the controller is commonly where devs place their logic. m.component accepts multiple parameters in which you can pass references (data/state/logic) to child components. See the docs. There's no need to pass Parent controllers to children.
However, I prefer to create a view-model which lives outside of any one component. It's where I keep view state (ie. form data) and view logic (ie. events, UI related callbacks, and shared state between components). This way, when I inevitably change/add components, I will not have to rework the controller logic in each component.
Leo Horie, the author of Mithril, wrote an article in which he explains communication between a Parent and One Child, but this can effortlessly be applied to multiple children.
Pub/Sub is a common JS idiom. The Mithril wiki lists a few community contributions that handle this. Go to the wiki, open the page titled "All Topics" and do a normal page search for "pub". You'll discover a few options there. Depending on the complexity of your app, your next move might be to search for a Pub/Sub library through google.
I guess when you press the button of ChildA, some model state will be updated? Then, if both childs share the same model, the redraw done by Mithril after each event will update ChildB automatically.
My suggestion is to pass the model to the child objects and let ChildA also be a controller for the button. Why not the parent? Parents should usually handle commands that apply to multiple child views (or itself), and a button click seems simple/coupled enough for ChildA to manage that itself. But it depends on the real complexity of the system, of course. Always the problem with a simple example, it does not describe reality. :)
Here's an example how I mean anyway: http://jsbin.com/sipahe/edit?js,output
(Sorry for the Coffeescript, but it's brief and conveys the meaning very well.)