Vue2.x+Quasar1.x结合http-vue-loader如何调用独立组件中的Quasar对话框

分两种可落地的方案，按需选择即可。

方案1：继续用组件标签引入写法（无需Dialog插件） #

你直接放<my-component></my-component>无响应的核心原因是没有透传控制q-dialog显隐的v-model状态，按如下步骤修改即可：

步骤1：改造封装的MyComponent.vue组件 #

做v-model双向绑定透传：

<template>
  <!-- 把原来的q-dialog的v-model绑定到计算属性innerShow -->
  <q-dialog v-model="innerShow" /* 保留你原来的其他q-dialog属性 */>
    <!-- 你的弹窗原有内容 -->
  </q-dialog>
</template>
<script>
module.exports = {
  props: {
    // 接收父组件v-model传的值
    value: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    innerShow: {
      get() {
        return this.value
      },
      set(val) {
        // 状态变化时通知父组件更新v-model
        this.$emit('input', val)
      }
    }
  }
}

步骤2：父组件使用 #

<template>
  <div>
    <q-btn label="打开弹窗" @click="showDialog = true" />
    <!-- 加v-model控制显隐即可，和直接用q-dialog逻辑完全一致 -->
    <my-component v-model="showDialog" />
  </div>
</template>
<script>
module.exports = {
  data() {
    return {
      showDialog: false
    }
  },
  components: {
    'my-component': httpVueLoader('/components/MyComponent.vue'),
  }
}
</script>

方案2：用Quasar Dialog插件调用 #

不需要提前做组件注册，直接把httpVueLoader加载的组件实例传给component参数即可，和官方import引入的组件作用完全一致：

前置要求 #

确保你初始化Quasar时已经注册了Dialog插件：

Vue.use(Quasar, {
  plugins: ['Dialog'] // 必须加这行，否则this.$q.dialog不存在
})

调用方法 #

// 在你需要触发弹窗的方法里直接写
this.$q.dialog({
  // 直接传httpVueLoader加载的组件即可，不需要提前注册到components
  component: httpVueLoader('/components/MyComponent.vue'),
  // 要传给弹窗组件的props统一写在这里
  componentProps: {
    title: '自定义标题',
    content: '自定义内容'
  }
}).onOk(() => {
  // 弹窗触发ok事件的回调
  console.log('点击了确定')
}).onCancel(() => {
  // 弹窗触发cancel事件的回调
  console.log('点击了取消')
})

封装组件的注意事项 #

用Dialog插件调用的自定义组件，不需要外层包<q-dialog>，直接写弹窗内容即可，需要关闭/触发回调时主动发射事件：

<template>
  <div class="q-pa-md">
    <h3>{{ title }}</h3>
    <p>{{ content }}</p>
    <q-btn label="确定" @click="$emit('ok')" />
    <q-btn label="取消" @click="$emit('cancel')" />
  </div>
</template>
<script>
module.exports = {
  props: {
    title: String,
    content: String
  }
}
</script>

内容的提问来源于stack exchange，提问作者za1234ki