我想把ui组件库里面的组件再次封装为组件，怎么控制v-model

Question

如：我想把vant的popup组件加一些东西封装组件APopup

// APopup.vue
<template>
  <van-popup v-model="show" position="bottom">
    <div>
      <p>封装后的组件A</p>
      <p>封装后的组件A</p>
      <p>封装后的组件A</p>
      <p>封装后的组件A</p>
      <p>封装后的组件A</p>
      <p>封装后的组件A</p>
      <p>封装后的组件A</p>
    </div>
  </van-popup>
</template>

<script>
  export default {
    model: {
      event: 'change'
    },
    data() {
      return {
        show: false
      }
    },
  }
</script>

那么我在其他组件使用APopup的时候，也想用v-model控制APopup的显示和隐藏
我的思路是另外声明prop，然后watch这个prop和data里的show，触发watch后派发change事件。

但是这样比较麻烦，有其他方法可以更好地实现吗

Answer 1

$attrs 和 $listeners了解一下

Answer 2

v-model总结一下：

1. 该组件接收一个value的prop
2. 该组件值变动时发出change事件

<template>
  <van-popup :value="show" @change="handleChange" position="bottom">
    <div>
      <p>封装后的组件A</p>
      <p>封装后的组件A</p>
      <p>封装后的组件A</p>
      <p>封装后的组件A</p>
      <p>封装后的组件A</p>
      <p>封装后的组件A</p>
      <p>封装后的组件A</p>
    </div>
  </van-popup>
</template>

<script>
  export default {
    data() {
      return {
        show: false
      }
    },
    handleChange(value) {
        this.show = value;
        this.$emit('change', value);
    }
  }
</script>

外部使用

<APopup v-model="vmodel"/>

Answer 3

Vuex，关注Store树，不需要麻烦的多级监听

Answer 4

你看下这篇文章，我想里面说的内容应该可以帮你解决
https://www.jianshu.com/p/d42...

Answer 5

// APopup.vue
<template>
  <van-popup v-model="show" position="bottom">
    <div>
      <p>封装后的组件A</p>
      <p>封装后的组件A</p>
      <p>封装后的组件A</p>
      <p>封装后的组件A</p>
      <p>封装后的组件A</p>
      <p>封装后的组件A</p>
      <p>封装后的组件A</p>
    </div>
  </van-popup>
</template>

<script>
  export default {
    props: {
       value: {
           type: Boolean,
           default: false
       }
    },
    watch: {
       value(val) {
           this.show = val;
       }
    },
    data() {
      return {
        show: this.value
      }
    },
  }
</script>

如果在子组件需要改变 show的值， 需要去更改父组件绑定的v-model;
例如： this.$emit('input', true);