Question

我正在尝试构建一个动态的Vue系统，我想在其中插入仅知道其名称的自定义组件。 here的启发带我去做：

  export default {
    name: 'MySite',
    mixins: [MyMixin],
    components: {MyComponent1, MyComponent2},
    ...
    }
    ...
    mounted() {
    
    var ComponentClass = Vue.extend(MyComponent1)
    var instance = new ComponentClass()
    instance.$mount() // pass nothing
    this.$refs.container.appendChild(instance.$el)
    }

现在，我想做同样的事情，但是只知道组件名称'MyComponent1'为String。怎么做呢？我想它比Vue与纯JavaScript更相关，但是我不知道该怎么做。

Answer 1

您是对的，这是一个简单的js。

看看下面的例子，最重要的是eval()

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  
  get getHeight() {
    return  this.height
  }
}

// js string code
var code = "new Polygon(15, 200)";
// convert it to code;
var cls = eval(code);

console.log(cls.getHeight)

Answer 2

我发现使用

callme@mg.ho.me

工作并做我想要的。这是最干净的解决方案吗？

VueJS-通过名称以编程方式创建组件

2 个答案: