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

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

具體的代碼應(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ù)后臺(tái)接口生成的，萬(wàn)一后臺(tái)給的標(biāo)簽里面沒(méi)有ABCDE，給了個(gè)H，頁(yè)面一臉懵逼，這個(gè)標(biāo)簽我沒(méi)見過(guò)，就不會(huì)渲染了。。。
 有沒(méi)有其他方法，其他有同學(xué)說(shuō)用v-if但是我不知道該怎么用

回答

編輯回答

萌吟

toolsName () {

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

this.config.elementType + 'Tools' 我的這個(gè)就是可能有可能沒(méi)注冊(cè)過(guò)的組件，然后通過(guò)root去撈就能判斷

2018年3月10日 20:58

編輯回答

懶洋洋

=。=最后我只能采用，自定義一個(gè)數(shù)組參數(shù)然后把注冊(cè)的組件名字放進(jìn)去，然后篩選。。。。。希望有更好建議的同學(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 (){ //動(dòng)態(tài)插入需要顯示的組件
      var template='<div><a >go edit =>{{id}}</a></div>';
      id++;
      this.items.push({template:template,data:{id}});      
    }
  }
});

component is 指令時(shí)，并不一定要先注冊(cè)組件。

這里是Codepen的實(shí)例

2017年4月30日 15:41