v-bind
In vue2.0, we often use v-bind to bind and pass values, but v-bind is a one-way binding. Only when the content passed by the parent component changes, the child component will be updated.
<div id="counter">
<button @click="adds()">加1</button>
<br />
<blog-post v-bind:title="counter" ></blog-post>
</div>
const Counter = {
data() {
return {
counter: 0
}
},
methods:{
adds(){
this.counter++
}
}
}
const app = Vue.createApp(Counter);
app.component('blog-post', {
props: ['counter'],
template: `{
{counter}}`
})
app.mount('#counter');
The above code is a simple use of simple v-bind. At this time, we can only use this.$emit to pass events and listen in the parent component, which is more troublesome. For convenience, vue2.0 can use syntactic sugar v-bind.sync to achieve this method (because vue.3.0.sync was removed, so here I replaced it with vue2.0
)
<div id="counter">
<div>父组件展示：{
{obj.age}}</div>
<blog-post v-bind.sync="obj"></blog-post>
</div>
Vue.component('blog-post', {
props:{
age:Number
},
methods:{
add(){
let num = this.age + 1;
this.$emit('update:age', num)
}
},
template:`
<div>
<button @click="add()">点我</button>
<div>{
{age}}</div>
</div>
`
})
new Vue({
el:'#counter',
data:{
obj:{
age:0
}
},
})
The above code is the basic usage of .sync, which saves me from listening to the information returned by the child component in the parent component.
For optimal use,
v-model
In the vue2.2 version, components are allowed to use v-molde for component value transfer, but a component can have one
<div id="counter">
<div>父组件展示：{
{age}}</div>
<blog-post v-model:age="age"></blog-post>
</div>
Vue.component('blog-post', {
model: {
prop: 'age',
event: 'change'
},
props:{
age:Number
},
methods:{
add(){
let num = this.age + 1;
this.$emit('change', num)
}
},
template:`
<div>
<button @click="add()">点我</button>
<div>{
{age}}</div>
</div>
`
})
new Vue({
el:'#counter',
data:{
age:0
},
})
The above is one of the ways to use v-molde in vue2, and there are other different ways of writing. This one is what I use for a long time. Others can refer to the official document v-
molde
When it comes to vue3.0, v-molde allows multiple v-moldes to be used on one component. The
v-model on the custom component is equivalent to passing the modelValue prop and receiving the thrown update:modelValue event:
see the code and replace the wording of vue2.0 with vue3.0
<div id="counter">
<div>父组件展示：{
{age}}</div>
<blog-post v-model="age"></blog-post>
</div>
const Counter = {
data() {
return {
age: 0
}
},
}
const app = Vue.createApp(Counter);
app.component('blog-post', {
props: {
modelValue: Number,
},
emits:['update:modelValue'],
methods:{
add(){
let num = this.modelValue += 1;
this.$emit('update:modelValue',num)
}
},
template: `<button @click="add()">加一</button>
<div>子组件展示：{
{modelValue}}</div>
`
})
app.mount('#counter');
Here we can see that we did not bind the name in v-model. The binding received by the subcomponent is on the modelValue.
It is also necessary to use emits to bind the callback name, updata:modelValue, of course, this can also be modified. Let's look at the case of multiple v-model bindings
<div id="counter">
<div>父组件展示：{
{age}}</div>
<blog-post v-model:age="age" v-model:name="name"></blog-post>
</div>
const Counter = {
data() {
return {
age: 0,
name:'你好'
}
},
}
const app = Vue.createApp(Counter);
app.component('blog-post', {
props: {
age: Number,
name: String
},
emits:['update:age','update:name'],
methods:{
add(){
let num = this.age += 1;
this.$emit('update:age',num)
}
},
template: `<button @click="add()">加一</button>
<div>子组件展示：{
{age}}</div>{
{name}}
`
})
app.mount('#counter');
In the above code, you can see the modified writing method of the parameters of the custom binding.
Then how to use v-molde when using modifiers.
<div id="counter">
<div>父组件展示：{
{age}}</div>
<blog-post v-model:age.numberb="age" ></blog-post>
</div>
const Counter = {
data() {
return {
age: '10',
}
},
}
const app = Vue.createApp(Counter);
app.component('blog-post', {
props: {
age: Number,
ageModifiers:{
default:() =>(10)
}
},
emits:['update:age'],
methods:{
numberValue(value){
let val = value;
if(this.ageModifiers.numberb){
val = Number(val);
}
return val
},
add(){
let s = this.numberValue(this.age);
let num = s + 1;
this.$emit('update:age',num)
}
},
template: `<button @click="add()">加一</button>
<div>子组件展示：{
{age}}</div>{
{name}}
`
})
app.mount('#counter');
In the above code, we have customized a modifier numberb (converting the accepted parameters into numbers). We can see that there is an additional one on the ageModifiers code. It is a custom modifier that is provided to the component through the ageModifiers prop (the necessary writing format of Modifiers). In the created cycle of the component, the value is true. When the modifier does not exist or is wrong, the default value is 10.
If there is something wrong, welcome to leave a message