vue2.0动态组件及render

<template>
  <div class="hello">
    <h1>{{ msg }}h1>
    <h2>这里是Boorh2>

    <component v-bind:my-data="items" v-bind:is="currentView">
      
    component>
    <a class="explain">直直a>
    <button v-on:click="addData">点击button>
  div>
template>

<script>
  //import $ from '@/assets/scripts/lib/zepto.min'
  //console.log($);
  //import Vue from 'vue'
  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: '

{{ item.c}}

',
props: ['myData'], 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('div', Array.apply(null, { length: num }).map(function (v,index) { return createElement('h3', items['c_'+index]['c'].toString()) })) } else { return createElement('h1', '没有数据!'); } } }; // 注册 //Vue.component('my-component', MyComponent); export default { name: 'bar', data () { return { msg: 'Bar', fuck: 'Hello', items: data, currentView: MyComponent } }, methods:{ addData : function(){ for(let p in data) { if(p == 'c_'+num) { data[p] = {'c': num }; } else { data['c'+num] = {'c': num }; } } num++; } } }; script> <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>

你可能感兴趣的:(vue2.0动态组件及render)