场景描述:
见: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)