V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
ghostgril
V2EX  ›  Vue.js

求教大家,这样的 vue 组件的模态框组件如何控制打开好呢

  •  
  •   ghostgril · 2018-03-29 09:39:45 +08:00 · 2061 次点击
    这是一个创建于 2423 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我使用了一个 vue 的框架 quasar,因为模态框内容比较多所以单独做了一个组件

    quasar 的模态框组件只能通过设置 v-model 和 refs.[name].open()打开。但是把模态框组件引用到其他组件的时候,refs 不能操作模态框开启,所以我只能每次都传一个 Boolean 值去控制模态框开启,当要关闭的时候每次都$emit 父组件去修改 Boolean 值。但是这样总觉的不舒服,有没有优雅的方法呢


    // 代码

    <q-modal ref="modal" v-model="isOpen"> // 模态框内容 </q-modal>

    // 在这个 q-modal 的.vue 里面可以通过 refs 开启模态框,通过$refs.modal.open()

    // 就是上面的模态框组件

    <my-modal ref="myModal" :isopen="true"></my-modal>

    // 这里就没有办法调用$refs 里面的 open 了,只能通过设置 isOpen 去操控

    7 条回复    2018-03-29 10:51:17 +08:00
    noe132
        1
    noe132  
       2018-03-29 10:06:29 +08:00
    chairuosen
        2
    chairuosen  
       2018-03-29 10:15:34 +08:00
    问题描述不清楚,my-modal 是谁写的
    ghostgril
        3
    ghostgril  
    OP
       2018-03-29 10:19:30 +08:00
    @chairuosen my-modal 就是引用了 q-modal 的.vue 组件
    ghostgril
        4
    ghostgril  
    OP
       2018-03-29 10:20:05 +08:00
    @noe132 双向绑定除非万不得已不回去使用的
    chairuosen
        5
    chairuosen  
       2018-03-29 10:47:47 +08:00
    @ghostgril 是你写的么?你能改么?加个 open(){this.$refs.modal.open()} 不得了
    ghostgril
        6
    ghostgril  
    OP
       2018-03-29 10:50:16 +08:00
    @chairuosen 是我写的
    fe619742721
        7
    fe619742721  
       2018-03-29 10:51:17 +08:00
    .sync 父子双绑用在这个场景不是挺合适的么。。
    分场景使用就行了啊。。
    我还在一个复杂需求里大量使用过对象浅拷贝特性 来频繁修改跨级组件间的内容呢。。
    自己控制好使用范围就行。。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2824 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 13:34 · PVG 21:34 · LAX 05:34 · JFK 08:34
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.