Vue自定义组件支持v-model双向绑定
父组件
<u-form-item label="组织名称" prop="appraiseOrg" borderBottom>
<orgSelect v-model="formInfo.appraiseOrg" />
</u-form-item>
子组件
<script>
export default {
// model选项用来避免冲突
// prop:用来指定props属性中的哪个值用来接收父组件v-model传递的值
// event:为了方便理解,可以简单理解为父组件@input的别名,从而避免冲突
model: {
prop: "value",
event: "changed",
},
props: {
// 由于model选项中的prop属性指定了,所以value接收的是父组件v-model传递的值
value: {
type: Object,
default: function() {
return {};
},
},
},
methods: {
onChange(obj) {
this.$emit("changed", obj);
},
},
};
</script>