vue自定义组件中的v-model

话不多说，直接上代码

父组件

<template>
  <div>
    <Base-input v-model="baseValue" @myChange="change"></Base-input>
    <button @click="changeValue">更改baseValue</button>
  </div>
</template>
<script>
import BaseInput from "./BaseInput";
export default {
  components: { BaseInput },
  data() {
    return {
      baseValue: "123",
    };
  },
  created() {},
  mounted() {},
  methods: {
    change(val) {
      // 子组件输入时，这里可以看到这两个值是一样的
      console.log(val);
      console.log(this.baseValue);
    },
    changeValue() {
      this.baseValue = "456";
    },
  },
};
</script>

子组件 BaseInput：

<template>
  <div>
    <!-- 这里没有用v-model，故意拆开来显示事件 -->
    <input type="text" :value="inputValue" @input="inputHandler" />
  </div>
</template>
<script>
export default {
  name: "BaseInput",
  // 官网上有这么一句话：一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，
  // 但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突
  model: {
    prop: "inputValue",
    // 这是向父组件提交myChange时，传递的值便自动修改了父组件v-model="baseValue"中的baseValue，实现了双向绑定
    event: "myChange",
  },
  // 还是必须用props来接，接的时候用model中定义的inputValue
  props: {
    inputValue: {
      type: String,
    },
  },
  data() {
    return {};
  },
  created() {},
  computed: {},
  methods: {
    inputHandler(e) {
      this.$emit("myChange", e.target.value);
    },
  },
};
</script>