效果预览
model 选项的语法
- 每个组件上只能有一个 v-model。
- v-model 默认会占用名为 value 的 prop 和名为 input 的事件，即 model 选项的默认值为
model: { prop: "value", event: "input", },
- 通过修改 model 选项，即可自定义v-model 的 prop 和 event
演示代码
父组件 father.vue
<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
<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>
