【说人话】真正意义上讲清楚了如何用$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></