[ vue ] Quasar封装q-dialog组件，在外层实现弹出框的开启和关闭

场景描述：

见：https://www.cnblogs.com/remly/p/12981582.html

具体实现：

<!-- 父组件 -->
<template>
  <div class="q-mt-md">
    <q-btn label="Login" @click="showLoginModal=true"/>
    <Login v-model="showLoginModal"/>
  </div>
</template>
 
<script>
import Login from 'components/Login.vue'
export default {
  components:{Register,Login},
  data(){
    return {
      showLoginModal:false
    }
  }
}
</script>
 
-----------------------------------------
 
<!-- 子组件 -->
<template>
<div>
  <q-dialog :value="value" @input="$emit('input',$event)">
  ...
  ...
  </q-dialog>
</div>
</template>
 
<script>
export default {
  props:{
    value:Boolean
  }
</script>

查看Quasar文档：q-dialog使用默认的value prop和默认的input事件，于是我重写了它的这个规则。

让q-dialog默认的value接受外面传进来的value

让q-dialog默认的input事件把内部的值抛出去

完成封装！（感觉是个俄罗斯套娃，不过封装完了很好用。）

注意：

子组件内要关闭弹出框怎么办？

答：用emit抛出false

this.$emit('input',false)