zoukankan      html  css  js  c++  java
  • [ 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)
  • 相关阅读:
    linux -- 部署java服务器(3) linux安装redis
    linux 安装php8
    linux mysql查看日志
    linux mysql常用的命令
    perl heredoc
    perl数值进制
    提问的智慧
    How to ask question the smart way
    PERL命令行
    图灵/异步图书
  • 原文地址:https://www.cnblogs.com/remly/p/12981671.html
Copyright © 2011-2022 走看看