Vue.js v-model sub-component
▌Introduction
Some notes about…
1. Props in
component
2. The way
to implement passing v-model to a child-component and how it works.
▌Environment
▋vue.js 2.5.16
▌Implement
Here we are going to create a select-list component
which the listed data (text and value) is from parent component. When the
selected value is changed, we would like to show a message and display it on
parent component.
▋About props
▋Basic usage
Vue.component('my-list', {
props: [
'options', //array
'alert', //function
],
data: function () {
return {
selected: null
};
},
watch: {
selected: function (val) {
this.alert(val.text);
}
},
template: `<div>
<select v-model="selected">
<option v-for="option
in options" :value="option">{{ option.text }}</option>
</select>
</div>`
})
▋Advanced usage
Vue.component('my-list', {
props: {
options: { //array
type: Array,
required: true,
validator: function (value) {
return
value.length == 3;
}
},
//options:
[Array, Object], //For multiple possible types
alert: { //function
type: Function,
default: function (text) {
alert('(Sub-component)You selected '+ text);
}
}
},
data: function () {
return {
selected: null
};
},
watch: {
selected: function (val) {
this.alert(val.text);
}
},
template: `<div>
<select v-model="selected">
<option v-for="option in options"
:value="option">{{ option.text }}</option>
</select>
</div>`
})
We can use Prop
validation to validate the values or type of a property.
l required: Check if pass a value to it is a must
l default: Assign a default value or function to the prop
l validator: Customize a validator
▋Use the component
<my-list :options='myOptions' :alert='myAlert'></my-list>
▋Emit an event of Parent
Now we will implement the
notification of the selected-option to the parent by emitting.
Lets update the parent’s
template like this,
▋Parent component
<my-list :options='movie.options' :alert='myAlert' @update-event="updateSelected" ></my-list>
Which the updateSelected
is the function from parent for updating the model of it.
Then we can emit “update-event”
in child component as following.
▋Child component
watch: {
selected: function (val) {
this.$emit('update-event', val);
}
},
Furthermore we can pass a
v-model to child component to make it easier.
▋Pass a v-model as prop
▋Parent component
<my-list :options='myOptions' v-model="selected"></my-list>
Notice that v-model is the syntactic sugar as
following,
<my-list :options='myOptions':value="selected" @input="selected
= $event"></my-list>
So we can update v-model as following in child
component.
▋Child component
watch: {
selected: function (val) {
this.$emit('input', val);
}
},
▋Source code
▌Reference
