封装vant-popup组件遇到的数据双向绑定问题。v-model和sync两种解决方法

需求：

---

• 需要在文章 、视频列表、帖子、直播、专题等评论区发布 评论。
• 评论发布框为一个弹出层。
• 使用vant实现。
  我感觉多处用到了这个弹出层，准备封装成一个子组件以便调用。

上图

---

这里遇到了个问题，就是不知道如何为子组件内部的孙组件的v-model传值。
这里数据我一直想不通的地方在于双向绑定需要事件，我想不到van-popup的事件是什么，后来才知道原来vue官方就说明了默认的v-model事件是input，默认绑定的值是value
查阅了好多地方，找到了两种解决方法，最终是在vant官方微信2群解决的，在此感谢 @A Lemon 提供的第一种方法和 @陪我笑闹人间 提供的第二种方法

---

首先是使用第一种方法实现思路

1. 父组件内调用子组件使用v-model
2. 子组件内的孙组件（van-popup）的v-model拆分成:value和@input
3. 然后通过$emit完成数据同步

细节：

• van-popup绑定的value对应从父组件内传来的props内的value
• van-popup的input事件生成的新值弹射到父组件v-model对应的默认input事件参数

具体实现代码

先贴简单的父组件内调用子组件的代码

 <comment-popup v-model="showPostDialog" />

然后是子组件的代码

<template>
    <van-popup
        class="comment-popup"
        position="bottom"
        overlay-class="opacity"
        :value="value"
        @input="val => this.$emit('input', val)"
    >
    <!-- 内部构造多余，请忽略，弹出层内部slot自己随便写 -->
        <div class="publish-comment van-hairline--top">