在Vue.js中动态挂载单个文件组件

Question

我有一个文件组件Main.Vue。

我还有另外三个单一文件组件A.vue、B.vue和C.vue。

我希望每次都能在Main.Vue中显示不同的组件。我所做的是：

<template>
<div>
<a v-if="isAVisible" ></a>
<b v-if="isBVisible" ></a>
</div>
</template>

<script>
import A from './A.vue';
import B from './B.vue';
...

这行得通，但不是我想要的。我想要一个不同的文件Factory.js，它可以导入A、B、C等所有组件。并具有返回组件的函数，我可以在Main.vue中以某种方式使用该组件。下面是我尝试过的Factory.js的样子：

import A from './A.vue';
import B from './B.vue';
function getComponent(){
  if (..)
    return new A();
  else if (..)
    return new B();
  ...
}

这根本不起作用。我想要工厂文件的方法，因为：

1)我想把它分割成不同的工厂文件

2)我希望将数据“附加”到每个组件上。因此，我将有一个对象，它包含返回实际组件的函数+一些额外的数据，比如"name“

有什么办法吗？

Answer 1

使用Vue的动态组件

您可以使用动态分量在组件之间动态切换。您将需要将组件定义对象绑定到component元素的component属性--Vue关于这方面的文档非常不言自明。以下也是一个简单的例子：

<template>
  <component :is="activeComponent"></component>
</template>

import componentA from 'component/a';
import componentB from 'component/b';

export default {
  components: {
    componentA,
    componentB,
  },

  data() {
    return {
      activeComponent: 'componentA',
    },
  },
};

可以直接将组件定义对象绑定到数据属性本身：

import componentA from 'component/a';
import componentB from 'component/b';

export default {
  data() {
    return {
      activeComponent: componentA,
    };
  },
};

若要切换组件，可以以编程方式更改activeComponent的值。

使用呈现函数

使用组件渲染功能可以实现更强大的组件动态安装方式。要做到这一点，我们必须创建我们自己版本的Vue的component元素&我们将称之为ElementProxy

import componentA from 'component/a';
import componentB from 'component/b';

export default {
  components: {
    componentA,
    componentB,
  },

  props: {
    type: {
      type: String,
      required: true,
    },
    props: {
      type: Object,
      default: () => ({}),
    },
  },

  render(createElement) {
    const { props: attrs } = this;
    return createElement(element, { attrs });
  },
};

现在可以使用ElementProxy代理元素。它的另一个好处是，您可以将道具作为一个对象传递进来，这将解决将道具传递给具有不同模型的动态组件的问题。

<template>
  <element-proxy :type="activeComponent" :props="props"></element-proxy>
</template>

import ElementProxy from 'components/elementProxy';

export default {
  components: {
    ElementProxy,
  },

  data() {
    return {
      activeComponent: 'componentA',
      props: { ... },
    };
  },
};

进一步阅读

• 动态组件的Vue文档
• 呈现函数的Vue文档
• 用于绑定道具的GitHub问题线程

Answer 2

是的，您需要动态组件：

<template>
  <div>
    <component v-bind:is="currentView">
    <!-- component changes when vm.currentView changes! -->
    </component>
  </div>
</template>

<script>
import A from './A.vue';
import B from './B.vue';

export default {
  data: {
    currentView: 'A'
  },
  components: {
    A,
    B,
  }
})

然后

function getComponent(){
  if (..)
    this.currentView = 'A';
  else if (..)
    this.currentView = 'B'
  ...
}

还可以根据手册直接绑定组件：

https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components