vue 中父传子通信

父子组件间传参的一个高级写法，和传统的组件间通信有些不一样。上代码

<script>
  const app = Vue.createApp({
    data() {
      return {
        conut:1
      }
    },
    template:`
    <div>
      <dome v-model="conut" />
    </div>
    `
  });
  app.component('dome',{
    props:['modelValue'],
    methods:{
      handleAdd(){
        this.$emit('update:modelValue',this.modelValue += 3)
      }
    },
    template:`
    <div @click="handleAdd">
      {{ modelValue }}
    </div>
    `
  })

解释：通过v-model来进行父子间的传参，子组件接受，定义的名字必须是modelValue 这是一个固定的写法，相应的我们再handleAdd事件中通过 this.$emit映射到方法必须是update:modelValue。这种写法就省去了在子组件上面的接受参数的步骤父子组件通过事件传递可以直接方便的通过this.$emit的方式传递 不用在methods中定义方法