问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue动态生成组件，如何判断该组件已经注册

头像
溪远
    5531527

    1.前端的页面布局是根据后台传的layout字段来生成的，通过vue <components> 标签，但是如果后台给的标签在前端这边没有注册过，必然会报错，所以我想获取页面已经注册过的组件和后台的接口做比对，然后只输出页面已经注册过的组件，网上有通过this.options.components来获取的，但是他是全部的，我需要是父组件里面注册的子组件列表

    具体的代码应该是

    html
<div id="app">
  <component :is="item" v-for="item in items" :key="item"></component>
</div>

js
 const A = { template: '<div>A</div>' }
 const B = { template: '<div>B</div>' }
 const C = { template: '<div>C</div>' }
 const D = { template: '<div>D</div>' }

 new Vue({
  el: '#app',
  data: {
      items: [A,B,D]
  },
  components: {
      A, B, C, D, E
  }
 }) 
 
 item是根据后台接口生成的，万一后台给的标签里面没有ABCDE，给了个H，页面一脸懵逼，这个标签我没见过，就不会渲染了。。。
 有没有其他方法，其他有同学说用v-if但是我不知道该怎么用
    vue.js
    阅读 12.4k
    3 个回答
    得票最新
    头像
    溪远
      5531527

      =。=最后我只能采用，自定义一个数组参数然后把注册的组件名字放进去，然后筛选。。。。。希望有更好建议的同学

      头像
      日出日落
        352
        
<html>
  <head></head>
  <body>
    <h2>Vue dynamic component demo</h2>
        <div id="app">
    <h4>vue version: {{ version }}</h4>
      <component  :is='item' v-for='item in items' > </component>
      <button v-on:click='handleAppend'>append</button>
    </div>
  </body>
</html>

         const A = { template: '<div>A</div>' };
 const B = { template: '<div>B</div>' };
 const C = { template: '<div>C</div>' };
 const D = { template: '<div>D</div>' };
 let id = 0;
var app = new Vue({
  el: '#app',
  data: {
    items:[A,B,D],
    version: Vue.version
  },
  methods:{
    handleAppend:function (){ //动态插入需要显示的组件
      var template='<div><a href="https://codepen.io/bonashen/pen/WMbqrd?editors=1011">go edit =>{{id}}</a></div>';
      id++;
      this.items.push({template:template,data:{id}});      
    }
  }
});

        component is 指令时，并不一定要先注册组件。

        这里是Codepen的实例

        头像
        BiggerKai
          180104370

          <component v-if="hasComponent" v-show="isEdit" :config="config" :is="toolsName"></component>

          toolsName () {

            return this.config.elementType + 'Tools'
},
hasComponent () {
  return this.$root.$options.components[this.toolsName]
}

this.config.elementType + 'Tools' 我的这个就是可能有可能没注册过的组件，然后通过root去捞就能判断
          查看全部 3 个回答
          推荐问题