【说人话】真正意义上讲清楚了如何用$emit()在Vue.js的自定义组件中实现v-model=“”双向绑定

子组件sg-component.vue代码 

<template>
  <div class="sg-component">
    <button @click="$emit('changeFontSizePx', ++fontSizePx)">增加+</button>
    <button @click="$emit('changeFontSizePx', --fontSizePx)">减少-</button>
    <button @click="$emit('changeFontSizePx', 12)">重置</button>
    <p :style="{ 'font-size': fontSizePx + 'px' }"> 子组件字号：{{ fontSizePx }}px </p>
  </div>
</template>
<script>
export default {
  props: ["fontSizePx"], //单项绑定(这个fontSizePx叫什么不重要，重要是保持一致，避开关键词，用于接收父组件v-model=后面传过来的值)
  model: {
    prop: "fontSizePx", //双向绑定(这个fontSizePx叫什么不重要，重要是保持一致，避开关键词，用于接收父组件v-model=后面传过来的值)
    event: "changeFontSizePx",
  },
};
</script>

父组件（引用子组件）代码

<template>
  <div>
    <sg-component v-model="fontSizePx" />
    <p :style="{ 'font-size': fontSizePx + 'px' }"> 父组件字号：{{ fontSizePx }}px </p>
  </div>
</template>
<script>
import sgComponent from "@/vue/components/sg-component"; //引入舒工自定义组件
export default {
  components: { sgComponent },
  data() {
    return {
      fontSizePx: 12, //双向绑定值
    };
  },
};
</script>

渲染效果

注意！在子组件内部不要用v-model绑定modelValue变量，否则会报错Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "modelValue" 

具体原因参考官方文档：​​https://cn.vuejs.org/v2/guide/components-props.html#单向数据流

https://cn.vuejs.org/v2/guide/components-props.html#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81​​

那么如何解决这一“双重双向绑定”报错问题呢？

我们可以在子组件内部引入一个中间变量（子组件内部作用域有效），用$emit()方法来触发来同步更新子组件内部的中间变量变化值，这样就可以有效避开“双重双向绑定”报错问题了。

修改后的组件sg-component.vue代码 

<template>
  <div class="sg-component">
    <button @click="$emit('changeFontSizePx', ++in_fontSizePx)">增加+</button>
    <button @click="$emit('changeFontSizePx', --in_fontSizePx)">减少-</button>
    <button @click="$emit('changeFontSizePx', (in_fontSizePx = 12))"> 重置 </button>
    <p :style="{ 'font-size': in_fontSizePx + 'px' }"> 子组件字号：{{ in_fontSizePx }}px </p>
  </div>
</template>
<script>
export default {
  props: ["fontSizePx"], //单项绑定(这个fontSizePx叫什么不重要，重要是保持一致，避开关键词，用于接收父组件v-model=后面传过来的值)
  model: {
    prop: "fontSizePx", //双向绑定(这个fontSizePx叫什么不重要，重要是保持一致，避开关键词，用于接收父组件v-model=后面传过来的值)
    event: "changeFontSizePx",
  },
  data() {
    return {
      //这里重新命名这个fontSizePx字段，不直接修改fontSizePx就可以解除报错。
      in_fontSizePx: this.fontSizePx,
    };
  },
};
</script>

这样就不会报错了~！