It seems to me that people are using model and props interchangeably. I try to find documents about props but failed. Could someone tell me the difference?
The model method creates a new model. It takes two parameters:
name
properties (optional)
You can create a new model and specify the properties. Or you can create the model first and then 'extend' it with the props method (props is short for properties). TodoOne and TodoTwo are the same.
const TodoOne = types.model("Todo", {title: types.string, done: types.boolean})
const TodoTwo = types.model("Todo")
.props({
title: types.string,
done: types.boolean
})
But how is this useful? Well the props method doesn't mutate the current type it creates a new one and extends it. This means that we can add or override existing props.
const Todo = types.model("Todo", {title: types.string, done: types.boolean})
const ColorfulTodo = Todo.props({color: types.string}) // returns a new model with a new property
const DefaultTodo = Todo.props({done: false}) // returns a new model with done property overwritten to default to false
The views and actions methods can extend models in same way as the props method.
Model needs properties.
const Todo = types
.model("Todo", {
title: types.string,
done: false
})
In the example above we created a Todo model (MST model) with two properties:
title which is a String
done witch is a Boolean and defaults to false
So when you hear props they are referring to the properties of the model.
Related
I'm creating a component dynamically (after a button click), using this commonly followed tutorial. The basic code is:
import Building_Info from './Info_Zone/Building'
var Building_Info_Class = Vue.extend(Building_Info)
var building_info_instance = new Building_Info_Class()
console.log(building_info_instance)
bulding_info_instance.$mount()
place_to_add_component.$el.appendChild(bulding_info_instance.$el)
However, my Building_Info component requires a prop. How can I pass it in? Alternative ways to dynamically creare components are welcome, though ideally they'd support Single File Components.
Note: there are several SO questions about dynamic props, but none I see that speak to this question.
The constructor returned from Vue.extend (i.e., Building_Info_Class) can receive an initialization object, containing the propsData property with initial prop values:
var building_info_instance = new Building_Info_Class({
propsData: {
propA: '123',
propB: true,
}
})
demo
I created the child using:
const ComponentClass = Vue.extend(someComponent);
const instance = new ComponentClass({
propsData: { prop: this.value }
})
instance.$mount();
this.$refs.container.appendChild(instance.$el);
When this.value is updated in the parent, its value doesn't change in the child. I've tried to watch it but it didn't work.
Update:
There's an easier way to achieve this:
create a <div>
append it to your $refs.container
create a new Vue instance and .$mount() it in the div
set the div instance's data to whatever you want to bind dynamically, getting values from the parent
provide the props to the mounted component from the div's data, through render function
methods: {
addComponent() {
const div = document.createElement("div");
this.$refs.container.appendChild(div);
new Vue({
components: { Test },
data: this.$data,
render: h => h("test", {
props: {
message: this.msg
}
})
}).$mount(div);
}
}
Important note: this in this.$data refers the parent (the component which has the addComponent method), while this inside render refers new Vue()'s instance. So, the chain of reactivity is: parent.$data > new Vue().$data > new Vue().render => Test.props. I had numerous attempts at bypassing the new Vue() step and passing a Test component directly, but haven't found a way yet. I'm pretty sure it's possible, though, although the solution above achieves it in practice, because the <div> in which new Vue() renders gets replaced by its template, which is the Test component. So, in practice, Test is a direct ancestor of $refs.container. But in reality, it passes through an extra instance of Vue, used for binding.
Obviously, if you don't want to add a new child component to the container each time the method is called, you can ditch the div placeholder and simply .$mount(this.$refs.container), but by doing so you will replace the existing child each subsequent time you call the method.
See it working here: https://codesandbox.io/s/nifty-dhawan-9ed2l?file=/src/components/HelloWorld.vue
However, unlike the method below, you can't override data props of the child with values from parent dynamically. But, if you think about it, that's the way data should work, so just use props for whatever you want bound.
Initial answer:
Here's a function I've used over multiple projects, mostly for creating programmatic components for mapbox popups and markers, but also useful for creating components without actually adding them to DOM, for various purposes.
import Vue from "vue";
// import store from "./store";
export function addProgrammaticComponent(parent, component, dataFn, componentOptions) {
const ComponentClass = Vue.extend(component);
const initData = dataFn() || {};
const data = {};
const propsData = {};
const propKeys = Object.keys(ComponentClass.options.props || {});
Object.keys(initData).forEach(key => {
if (propKeys.includes(key)) {
propsData[key] = initData[key];
} else {
data[key] = initData[key];
}
});
const instance = new ComponentClass({
// store,
data,
propsData,
...componentOptions
});
instance.$mount(document.createElement("div"));
const dataSetter = data => {
Object.keys(data).forEach(key => {
instance[key] = data[key];
});
};
const unwatch = parent.$watch(dataFn || {}, dataSetter);
return {
instance,
update: () => dataSetter(dataFn ? dataFn() : {}),
dispose: () => {
unwatch();
instance.$destroy();
}
};
}
componentOptions is to provide any custom (one-off) functionality to the new instance (i.e.: mounted(), watchers, computed, store, you name it...).
I've set up a demo here: https://codesandbox.io/s/gifted-mestorf-297xx?file=/src/components/HelloWorld.vue
Notice I'm not doing the appendChild in the function purposefully, as in some cases I want to use the instance without adding it to DOM. The regular usage is:
const component = addProgrammaticComponent(this, SomeComponent, dataFn);
this.$el.appendChild(component.instance.$el);
Depending on what your dynamic component does, you might want to call .dispose() on it in parent's beforeDestroy(). If you don't, beforeDestroy() on child never gets called.
Probably the coolest part about it all is you don't actually need to append the child to the parent's DOM (it can be placed anywhere in DOM and the child will still respond to any changes of the parent, like it would if it was an actual descendant). Their "link" is programmatic, through dataFn.
Obviously, this opens the door to a bunch of potential problems, especially around destroying the parent without destroying the child. So you need be very careful and thorough about this type of cleanup. You either register each dynamic component into a property of the parent and .dispose() all of them in the parent's beforeDestroy() or give them a particular selector and sweep the entire DOM clean before destroying the parent.
Another interesting note is that in Vue 3 all of the above will no longer be necessary, as most of the core Vue functionality (reactivity, computed, hooks, listeners) is now exposed and reusable as is, so you won't have to $mount a component in order to have access to its "magic".
I'm exposing a Vue observable that reflects sign-in status:
// auth.js
const user = Vue.observable({
displayName: '...',
isSignedIn: null // Boolean
});
...
export { user };
Though the name is observable, I think anyone importing user can also modify the fields. How could I prevent this?
You can freeze the object before make it reactive, like this example below.
const user = Vue.observable(
Object.freeze({
displayName: '...',
isSignedIn: true // Boolean
})
);
The question is why to use this, better to expose a non-reactive object. Check the Vue.observable definition here
I have a component whose purpose is to display a list of items and let the user select one or more of the items.
This component is populated from a backend API and fed by a parent component with props.
However, since the data passed from the prop doesn't have the format I want, I need to transform it and provide a viewmodel with a computed property.
I'm able to render the list and handle selections by using v-on:click, but when I set selected=true the list is not updated to reflect the change in state of the child.
I assume this is because children property changes are not tracked by Vue.js and I probably need to use a watcher or something, but this doesn't seem right. It seems too cumbersome for a trivial operation so I must assume I'm missing something.
Here's the full repro: https://codesandbox.io/s/1q17yo446q
By clicking on Plan 1 or Plan 2 you will see it being selected in the console, but it won't reflect in the rendered list.
Any suggestions?
In your example, vm is a computed property.
If you want it to be reactive, you you have to declare it upfront, empty.
Read more here: reactivity in depth.
Here's your example working.
Alternatively, if your member is coming from parent component, through propsData (i.e.: :member="member"), you want to move the mapper from beforeMount in a watch on member. For example:
propsData: {
member: {
type: Object,
default: null
}
},
data: () => ({ vm: {}}),
watch: {
member: {
handler(m) {
if (!m) { this.vm = {}; } else {
this.vm = {
memberName: m.name,
subscriptions: m.subscriptions.map(s => ({ ...s }))
};
}
},
immediate: true
}
}
Assume I have set of actions in different parts of the state tree that apart from their logic should modify certain property on the root node, for instance, toggle loading prop to indicate that UI should globally change progress indicator visibility.
const Contacts = types.model( 'Contacts', {
items: types.array(types.string)
}).actions(self=>({
show: flow(function* fetchData(){
// somehow indicate start of the loading process
self.items = yield fetch();
// somehow indicate end of the loading process
})
}));
const Store = types.model('AppStore', {
loading: types.optional(types.boolean, false),
contacts: Contacts
}).actions(self => ({
toggle() {
self.loading = !self.loading;
}
}));
While I certainly can use getRoot this will bring certain inconvenience to testing flow and downgrades overall design transparency.
Probably use of lazy composition and exporting instances along with model declarations from module can do, but this looks even weirder for me.
What is the suggested way to deal with this kind of issues in Mobx-State-Tree?
I think you can use types.reference and types.late in your models which down the tree for access to the root actions.