Detailed explanation of vue2.0 dynamic components and render

This article mainly shares with you the detailed explanation of vue2.0 dynamic components and render, hoping to help everyone.

is as follows:

##

<template>
 <p class="hello">
 <h1>{{ msg }}</h1>
 <h2>这里是Boor</h2>
 <component v-bind:my-data="items" v-bind:is="currentView">
  <!-- 组件在 vm.currentview 变化时改变！ -->
 </component>
 <a class="explain">直直</a>
 <button v-on:click="addData">点击</button>
 </p>
</template>
<script>
 //import $ from &#39;@/assets/scripts/lib/zepto.min&#39;
 //console.log($);
 //import Vue from &#39;vue&#39;
 function isEmptyObject(e) {
 var t;
 for (t in e)
  return !1;
 return !0
 }
 function objectLength(o) {
  var len = 0;
  for(var p in o) {
   len++;
  }
  return len;
 }
 let data ={
  c_0:{c:1},
  c_1:{c:2},
  c_2:{c:3},
  c_3:{c:4}
 };
 let num = 0;
 //console.log(objectLength(data));
 const MyComponent = {
 //template: &#39;<h3 v-for="item in items">{{ item.c}}</h3>&#39;,
 props: [&#39;myData&#39;],
 data(){
  return{
  //items : myData
  }
 },
 render: function (createElement) {
  debugger;
  let items = this.myData;
   //items = JSON.stringify(items);
  let num = objectLength(items);
 if (!isEmptyObject(items)) {
  debugger;
  return createElement(&#39;p&#39;, Array.apply(null, { length: num }).map(function (v,index) {
  return createElement(&#39;h3&#39;, items[&#39;c_&#39;+index][&#39;c&#39;].toString())
  }))
 } else {
  return createElement(&#39;h1&#39;, &#39;没有数据!&#39;);
 }
 }
 };
 // 注册
 //Vue.component(&#39;my-component&#39;, MyComponent);
export default {
 name: &#39;bar&#39;,
 data () {
 return {
  msg: &#39;Bar&#39;,
  fuck: &#39;Hello&#39;,
  items: data,
  currentView: MyComponent
 }
 },
 methods:{
 addData : function(){
  for(let p in data) {
   if(p == &#39;c_&#39;+num) {
    data[p] = {&#39;c&#39;: num };
   } else {
    data[&#39;c&#39;+num] = {&#39;c&#39;: num };
   }
  }
  num++;
 }
 }
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
 font-weight: normal;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
</style>

Related recommendations:

Detailed explanation of the use of custom dynamic components in vue

The above is the detailed content of Detailed explanation of vue2.0 dynamic components and render. For more information, please follow other related articles on the PHP Chinese website!