vue组件封装使用v-model控制

1. 今天封装npmUI库想学vant有赞ui框，组件用v-model传参，网上很多写的乱七八糟。记录下

<!-- 子组件 -->
<template>
  <div class="popup-container" v-show="popupState">
    <div id="popup" class="popup-main"></div>
  </div>
</template>

<script>
export default {
  data() {},
  model: {
    prop: "popupState",
    event: "input"
  },
  props: {
    popupState: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    hidePopup() {
      this.$emit("input", false);
    }
  }
};
</script>


<!-- 父组件 -->
<nw-popup-filter v-model="popupState"></nw-popup-filter>
data() {
    return {
        popupState: false
    }
}

总结：重点就是子组件有个model对象接收，里面有对应父组件调用的值（prop）和对应的触发事件名(event)。