基于vue2.0动态组件及render详解

如下所示：<template><divclass="hello"><h1>{{msg}}</h1><h2>这里是Boor</h2><

如下所示：

<template>
 <div 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>
 </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: '<h3 v-for="item in items">{{ item.c}}</h3>',
 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>
<!-- 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>

以上这篇基于vue2.0动态组件及render详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。