鍍金池/ 問答/HTML/ vue動態(tài)生成組件，如何判斷該組件已經(jīng)注冊

vue動態(tài)生成組件，如何判斷該組件已經(jīng)注冊

1.前端的頁面布局是根據(jù)后臺傳的layout字段來生成的，通過vue <components> 標(biāo)簽，但是如果后臺給的標(biāo)簽在前端這邊沒有注冊過，必然會報錯，所以我想獲取頁面已經(jīng)注冊過的組件和后臺的接口做比對，然后只輸出頁面已經(jīng)注冊過的組件，網(wǎng)上有通過this.options.components來獲取的，但是他是全部的，我需要是父組件里面注冊的子組件列表

具體的代碼應(yīng)該是

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是根據(jù)后臺接口生成的，萬一后臺給的標(biāo)簽里面沒有ABCDE，給了個H，頁面一臉懵逼，這個標(biāo)簽我沒見過，就不會渲染了。。。
 有沒有其他方法，其他有同學(xué)說用v-if但是我不知道該怎么用
回答
編輯回答
萌吟

<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去撈就能判斷
2018年3月10日 20:58
編輯回答
懶洋洋

=。=最后我只能采用，自定義一個數(shù)組參數(shù)然后把注冊的組件名字放進去，然后篩選。。。。。希望有更好建議的同學(xué)

2017年12月18日 12:04
編輯回答
浪婳

<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 (){ //動態(tài)插入需要顯示的組件
      var template='<div><a >go edit =>{{id}}</a></div>';
      id++;
      this.items.push({template:template,data:{id}});      
    }
  }
});

component is 指令時，并不一定要先注冊組件。

這里是Codepen的實例

2017年4月30日 15:41