Vue Quasar modal在消息中放入组件答案

【问题标题】：Vue Quasar modal put in component in messageVue Quasar modal在消息中放入组件
【发布时间】：2019-05-23 04:30:50
【问题描述】：

我有一个 q-btn。当我点击它时，它会弹出一个模式。

<q-btn 
    @click="handler(userA)" 
    round color="primary" 
    icon="perm_identity"/>

下面的这个处理程序在我的数据返回对象中。

handler: (userA) => {
            console.log(`handler: ${userA}`)
            this.$q.dialog({
              title: 'Alert',
              message: '{{<buyer-info></buyer-info>}}'
            }).catch(() => {})
          }

目前显示的消息正是{{<buyer-info></buyer-info>}}.我已经注册了一个

components: { 'buyer-info': BuyerInfo },

我的 BuyerInfo 组件有 <template><h1>hi</hi></template> 但这没有被渲染。

我怎样才能让它在模态消息上呈现？

【问题讨论】：

因为 q-dialog 是一个组件的包装器，在构建过程中会变成普通的 HTML 标签。因此，您不能以动态样式使用 vue 的组件。您应该将对话框组件作为新的单独组件直接放置在您的应用中。

标签： vue.js vuejs2 quasar-framework

【解决方案1】：

您可以通过使用自定义对话框来实现这一点。

<q-dialog
        v-model="customDialogModel"
        stack-buttons
        prevent-close
        @ok="onOk"
        @cancel="onCancel"
      >
        <span slot="title">Alert</span>
        <span slot="message"><buyer-info></buyer-info></span>
      </q-dialog>


methods: {
    onOk(){
      alert("hi")
    },
    onCancel(){
        alert("cancle")
    },
    handler(){
        this.customDialogModel=true
    }
  },

【讨论】：