一、model官方文档
- 类型:{ prop?: string, event?: string }
- 详细:
允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。 - Example:
Vue.component('my-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
// this allows using the `value` prop for a different purpose
value: String,
// use `checked` as the prop which take the place of `value`
checked: {
type: Number,
default: 0
}
},
// ...
})
<my-checkbox v-model="foo" value="some value"></my-checkbox>
- 以上代码块相当于
<my-checkbox
:checked="foo"
@change="val => { foo = val }"
value="some value">
</my-checkbox>
二、代码示列
- 父组件
<template>
<section>
<el-button @click="handleClick">父组件说</el-button>
<span>{{notice}}</span>
<child v-model="notice"></child>
</section>
</template>
<script>
import child from "./child";
export default {
name: "Parent",
components: {
child
},
data() {
return {
notice: ""
};
},
methods: {
handleClick() {
this.notice = "我是父组件";
}
}
};
</script>
- 子组件
<template>
<section>
<el-button type="primary" @click="handleClick">子组件回应</el-button>
</section>
</template>
<script>
export default {
name: "Child",
model: {
prop: "message",
event: "childToParent", // event的事件名需与$emit派发的相同
},
props: {
message: {
type: String,
required: true
}
},
methods: {
handleClick() {
this.$emit("childToParent", "子组件回应:我是子组件"); // $emit的事件名需与model中event相同
}
}
};
</script>
- 默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event,子组件代码可改为
<template>
<section>
<el-button type="primary" @click="handleClick">子组件回应</el-button>
</section>
</template>
<script>
export default {
name: "Child",
props: {
value: {
type: String,
required: true
}
},
methods: {
handleClick() {
this.$emit("input", "子组件回应:我是子组件");
}
}
};
</script>
三、子组件读取并修改父组件传的prop,且同步到父组件
<template>
<section>
子组件回应:<el-input v-model="value" placeholder="输入子组件对父组件说的话"></el-input>
</section>
</template>
<script>
export default {
name: "Child",
props: {
value: {
type: String,
required: true
}
}
};
</script>
直接v-model绑定报错,如图,子组件中不能直接修改父组件传的prop
使用computed计算属性重新赋值:
<template>
<section>
子组件回应:
<el-input v-model="_value" placeholder="输入子组件对父组件说的话"></el-input>
</section>
</template>
<script>
export default {
name: "Child",
props: {
value: {
type: String,
required: true
}
},
computed: {
_value: {
get() {
return this.value;
},
set(val) {
this.$emit("input", val);
}
}
}
};
</script>
地址:vue官方文档