效果预览
model 选项的语法
- 每个组件上只能有一个 v-model。
- v-model 默认会占用名为 value 的 prop 和名为 input 的事件,即 model 选项的默认值为
bash
model: {
prop: "value",
event: "input",
},
- 通过修改 model 选项,即可自定义v-model 的 prop 和 event
演示代码
父组件 father.vue
html
<template>
<div style="margin: 30px">
<p style="margin: 30px">{{ msg }}</p>
<Child v-model="msg" />
</div>
</template>
<script>
import Child from "./child.vue";
export default {
components: {
Child,
},
data() {
return {
msg: "你好",
};
},
};
</script>
子组件 child.vue
html
<template>
<div>
<input type="text" @input="chang_parentMsg" :value="parentMsg" />
</div>
</template>
<script>
export default {
model: {
prop: "parentMsg",
event: "chang_parentMsg",
},
props: {
parentMsg: String,
},
methods: {
chang_parentMsg(e) {
this.$emit("chang_parentMsg", e.target.value);
},
},
};
</script>