vue自定义组件v-model双向绑定

一、model官方文档

1. 类型：{ prop?: string, event?: string }
2. 详细：
   允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。
3. 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>

4. 以上代码块相当于

 <my-checkbox
  :checked="foo"
  @change="val => { foo = val }"
  value="some value">
</my-checkbox>

二、代码示列

1. 父组件

<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>

2. 子组件

<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>

3. 默认情况下，一个组件上的 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官方文档