Question

我正在使用ElementUI Tabs（只是HTML和JS文件，没有.vue文件）做一个项目，我想打开一个新的Tab，并在里面添加html，就像我一直习惯在Jquery和SemanticUI中做的那样例如，用户单击名为“Person”的菜单，并在选项卡（id =“tab1”）中打开Person View（Vue组件）以添加新的人员注册，如果用户再次单击“Person”菜单，另一个选项卡打开（id =“tab2”）与人物视图。

第一个问题：因为Vue组件没有“el：”选择器，我怎么能告诉组件（Person View）在“tab1”里面打开，再点击在“tab2”里面打开？在Vue.component（）中有任何选择器如“el”？

第二个问题：使用Vue实例（新的Vue（{options}）），它可以工作，因为可以使用选择器“el”，但我之前在一些博客中读过，这不是好习惯，因为该应用必须只有一个Vue实例。是否正确添加了多个Vue实例（new Vue（）），因为在项目中添加了许多Vue.component（{}）？

第三个问题：我之前已经读过Vue.component（）是一个Vue实例，所以说Vue.component（）和Vue（）是同一个东西，但是使用不同的sintax是正确的吗？

Answer 1

问题1：实际上，一个组件确实有一个el。您的模板确定el是什么。例如，我为select2创建了一个内联模板，如下所示：

<select2>
    <select></select>
</select2>

Vue.componet("select2", {blah blah blah});

在这种情况下，el是直接选择框。

如果我这样做了：

<select2>
    <div>
        <select></select>
    </div>
</select2>

组件el将是div。

问题2：您从这些博客中听到的内容是无稽之谈，至少就Vue 2而言（从未使用过ver 1）作为编码员，您可以确定代码中的el是什么，因此可以安全地用作选择器。我一直这样做。

Vues不能重叠，但你可以在页面上拥有尽可能多的意义。在我的一组选项卡上，每个选项卡彼此完全不同并且彼此独立，因此每个选项卡都有自己的Vue实例。另一方面，每个选项卡都是相同的，因此组成一个组件并在每个选项卡内生成它作为父Vue实例的一部分。

问题3：将Components视为零件，将Vue实例视为包含零件的整体。我个人使用组件来减少和划分代码。例如，我有一个DataTables组件，一个select2组件和一个选项卡组件，在所有情况下，每个页面上都有一个数字。然后，我需要做的就是将它们包含在我的Vue实例定义中。

Answer 2

经过近两周的尝试，我明白了！首先，我创建了一个在JS文件中具有组件结构的对象（personview.js）我用requireJS加载，并作为参数传递给a Vue实例的方法称为appVue：

appVue.addComponent(componentName,{name:"personview",template:"<div>html tags...</div>",methods:...});

在appVue中我添加了方法：

var appVue=new Vue({
    el:'#app',
    data() {
        return {
            components: {},
            instances: {}
        }
    },
    methods: {
        addComponent(componentName,componentBody){
            this.$data.components[componentName]=Vue.component(componentName,Vue.extend(componentBody));
        }
    }
}

当用户点击菜单时，将调用openViewByClickOnMenu方法并执行：

methods: {
    openViewByClickOnMenu(){
        //id to identify the components and scripts to load     
        var componentName="personView";  //for this example i forced the name       
        //call a method that adds the new tab, and inside the tab adds 
        //<div id="divX"></div> and return the counter ever increased. 
        //X in id attribute is the number genereate by the counter
        var ctTab=body.addTab({label:menuItem.label});      
        // will be used to identify an instance of compoment
        var componentId=componentName+ctTab;  //will be personView1, personView2, etc..
        // will be used to identify the div where i want to show component
        var divTabId="div"+ctTab;
        //load the personview.js with component body
        requirejs([componentName],function(){
            //creates a new instance of component
            app.$data.instances[componentId]=new app.$data.componentes[componentName];
            //mounts the component in the div that i want
            app.$data.instances[componentId].$mount("#"+divTabId);
        });
    }

我认为Vue团队可以在Vue实例中添加一个方法来添加组件在动态上更容易，有时候没有必要加载所有html和js文件，因为用户没有访问/权限看一些意见。我想念一种加载html native的方法，比如 Angular确实如此，因为有时我们需要从模板引擎生成html 例如，在SpringBoot中。

Vue倍增组件

2 个答案: