Vue2 custom component v-model controls third-party components

Let’s not talk nonsense~~


The implementation idea in the above picture is mainly to split the v-moel syntactic sugar of the third-party components and process them separately, and use the computed calculation attribute to obtain the updated value of the parent component and upload the modified value of the child component.
Subcomponent code:

<template>
  <div>
    <van-popup
      :value="innerValue"
      @input="updateValue"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <div class="record_container">
        <!-- 弹窗内容 -->
      </div></van-popup
    >
  </div>
</template>
<script>
import { Popup } from 'vant'
export default {
  components: {
    [Popup.name]: Popup
  },
  props: {
    // 用来接收父组件v-model传递的数据
    value: {
      type: Boolean
    }
  },
  computed: {
    innerValue: {
      get() {
        return this.value
      },
      set(newValue) {
        this.$emit('input', newValue)
      }
    },
  },
  methods: {
    updateValue(value) {
      this.innerValue = value
    },
  }
}
</script>
<style lang="scss" scoped>
</style>

use:

<template>
  <div>
    <button @click="showDialog = true">弹窗</button>
    <button @click="startRecord">开始录音</button>
    <button @click="stopRecord">停止录音</button>
    <button @click="playRecord">播放录音</button>
    <CustomDialog v-model="showDialog"></CustomDialog>
  </div>
</template>
<script>
import CustomDialog from '@/components/CustomDialog.vue'

export default {
  components: {
    CustomDialog
  },
  data() {
    return {
      showDialog: false,
    }
  },
}
</script>
<style lang="scss" scoped>
</style>

Do you know of any more convenient methods? Tell me in the comment area if you have any