Vue自定义组件支持v-model双向绑定

209 阅读1分钟

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>