基于vue2.0动态组件及render怎么用

2021/8/17 22:10:44
栏目: 其他类
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

小编给大家分享一下基于vue2.0动态组件及render怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

如下所示:

<template> <div class="hello"> <h2>{{ msg }}</h2> <h3>这里是Boor</h3> <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: '<h4 v-for="item in items">{{ item.c}}</h4>', props: ['myData'],
 data(){
  return{
  //items : myData  }
 },
 renderfunction (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('h4', items['c_'+index]['c'].toString())
  }))
 } else {
  return createElement('h2''没有数据!');
 }
 }
 };
 // 注册 //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>h2h3 {
 font-weight: normal;
}ul {
 list-style-type: none;
 padding0;
}li {
 display: inline-block;
 margin0 10px;
}a {
 color#42b983;
}</style>

以上是“基于vue2.0动态组件及render怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注辰迅云云资讯频道!


辰迅云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

推荐阅读: rocketmq安装部署的方法是什么