方法一:model
选项
//父组件代码:
<template>
<div>
<child v-model="num"></child>{{num}}
</div>
</template>
<script>
import child from './child'
export default {
components:{
child
},
data(){
return {
num:0
}
}
};
</script>
//子组件代码:
<template>
<div>
<input type="text" :value="data" @input="change">
</div>
</template>
<script>
export default {
model: {
prop: "data",
event: "on-change"
},
props: {
data: Number
},
methods: {
change(event) {
this.$emit("on-change", Number(event.target.value));
}
}
};
</script>
父组件的v-model指令所绑定的属性num通过model选项传递给子组件的data属性,子组件通过自定义事件改变父组件的num属性。
model选项的参数意义:
prop:指定父组件双向绑定子组件的哪个属性。
event:指定触发双向绑定的事件名
方法二:通过prop和自定义事件
//父组件代码:
<template>
<div>
<child :data="num" @on-change="num=$event"></child>{{num}}
</div>
</template>
<script>
import child from './child'
export default {
components:{
child
},
data(){
return {
num:0
}
}
};
</script>
//子组件代码:
<template>
<div>
<input type="text" :value="data" @input="change">
</div>
</template>
<script>
export default {
props: {
data: Number
},
methods: {
change(event) {
this.$emit("on-change", Number(event.target.value));
}
}
};
</script>
方法三:sync修饰符
//父组件代码:
<template>
<div>
<child :data.sync="num"></child>{{num}}
</div>
</template>
<script>
import child from './child'
export default {
components:{
child
},
data(){
return {
num:0
}
}
};
</script>
//子组件代码:
<template>
<div>
<input type="text" :value="data" @input="change">
</div>
</template>
<script>
export default {
props: {
data: Number
},
methods: {
change(event) {
this.$emit("update:data", Number(event.target.value));
}
}
};
</script>
方法三其实是方法二的一种简写:
父组件中
<child :data.sync="num"></child>
相当于
<child :data="num" @update="num=$event"></child>
注意:在方法三中,带有 .sync
修饰符的 v-bind
指令不能和表达式一起使用 (例如 :data.sync=”num + ‘!’”
是无效的)。你只能提供你想要绑定的属性名,这类似 v-model指令