Question

我有一个带有配置对象的确认弹出Vue组件，如下所示：

{
  title: null,
  message: null,
  onConfirm: null,
  onDismiss: null,
  modal_class: null,
  icon: null,
  confirmBtnText: null,
  confirmBtnColor: null,
  component: null
}

在模板中，我想在此处呈现一个“动态”组件：

<component class="component-container" :is="component"></component>

我正在初始化传入的组件，如下所示：

import {CarrierSaferInfo} from './path/to/single-file-component.vue'
let SaferInfo = Vue.extend(CarrierSaferInfo)
let SaferComp = new SaferInfo({
  propsData: {
    carrier,
    dom_class: 'text-white',
  }
})
openConfirmDialog({
  //...other props
  component: SaferComp
})

但是我得到了错误：

Failed to mount component: template or render function not defined.

编辑：现在，我尝试使用扩展后的组件的实际$options对象：

<component class="component-container" :is="component.$options"></component>

在组件定义中，道具carrier是必需的。尽管在$options对象中发生的事件表明carrier内的propsData道具是一个对象，但仍在说：

Missing required prop: carrier

所以，取得了进展，但是由于某种原因现在propsData并未填充到渲染功能中。

Answer 1

我认为您正在寻找的是v-bind而不是is。如果您想将is全部保留为一个对象，可以将v-bind包括在内。

const CarrierSaferInfo = {
  props: {
    dom_class: String,

    carrier: {
      required: true,
      type: String
    }
  },

  template: '<div :class="dom_class">{{ carrier }}</div>'
}

new Vue({
  el: '#app',

  data() {
    return {
      component: null
    }
  },

  methods: {
    onClick() {
      this.component = {
        is: CarrierSaferInfo,
        carrier: 'hello',
        dom_class: 'text-white'
      }
    }
  }
})

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<div id="app">
  <button @click="onClick">Open</button>
  <component v-if="component" v-bind="component" />
</div>

请注意，我已经摆脱了SaferInfo，SaferComp和任何提及的Vue.extend或new。在我有this.component = ...的地方，您可能需要改用这样的东西：

openConfirmDialog({
    // ... other props ...
    component: {
        is: CarrierSaferInfo,
        carrier,
        dom_class: 'text-white'
    }
})

可以与is一起使用。不确定是否存在更直接的方法，但是包装器组件可以提供用于设置道具的render函数。例如：

const CarrierSaferInfo = {
  props: {
    dom_class: String,

    carrier: {
      required: true,
      type: String
    }
  },

  template: '<div :class="dom_class">{{ carrier }}</div>'
}

new Vue({
  el: '#app',

  data() {
    return {
      component: null
    }
  },

  methods: {
    onClick() {
      this.component = {
        render(h) {
          return h(CarrierSaferInfo, {
            props: {
              carrier: 'howdy',
              dom_class: 'text-white'
            }
          })
        }
      }
    }
  }
})

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<div id="app">
  <button @click="onClick">Open</button>
  <component v-if="component" :is="component" />
</div>

Answer 2

这看起来很相关：https://top10webjs.com/2019/02/02/vue-js-passing-props-dynamically-to-dynamic-component-in-vuejs/

<component :is=”currentComponent” v-bind=”currentProperties”></component>

通过此处的语法： https://vuejs.org/v2/guide/components-props.html#Passing-the-Properties-of-an-Object

对通过配置对象

2 个答案: