这次给大家带来vue2.0动态组件与render使用说明，vue2.0动态组件与render使用的注意事项有哪些，下面就是实战案例，一起来看一下。
如下所示：
<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 '@/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('p', 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>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是vue2.0动态组件与render使用说明的详细内容。更多信息请关注PHP中文网其他相关文章！
