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

 更新时间:2018年03月17日 12:52:16   作者:huang100qi  
下面小编就为大家分享一篇基于vue2.0动态组件及render详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

如下所示:

<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详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 5种vue模糊查询的方法总结

    5种vue模糊查询的方法总结

    在Vue中,有多种方式可以实现模糊查询,这篇文章主要介绍了5种vue中的常用方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-08-08
  • vue的滚动条插件实现代码

    vue的滚动条插件实现代码

    这篇文章主要介绍了vue的滚动条插件实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • vue实现下载文件流完整前后端代码

    vue实现下载文件流完整前后端代码

    这篇文章主要为大家详细介绍了vue实现下载文件流完整前后端代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • vue中使用heatmapjs的示例代码(结合百度地图)

    vue中使用heatmapjs的示例代码(结合百度地图)

    这篇文章主要介绍了vue中使用heatmapjs的示例代码(结合百度地图),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue中如何给el-table-column添加指定列的点击事件

    vue中如何给el-table-column添加指定列的点击事件

    elementui中提供了点击行处理事件,下面这篇文章主要给大家介绍了关于vue中如何给el-table-column添加指定列的点击事件,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • VUE登录注册页面完整代码(直接复制)

    VUE登录注册页面完整代码(直接复制)

    这篇文章主要给大家介绍了关于VUE登录注册页面的相关资料,在Vue中可以使用组件来构建登录注册页面,文中通过图文以及代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • vue实现图片滑动验证

    vue实现图片滑动验证

    这篇文章主要为大家详细介绍了vue实现图片滑动验证,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue基于mint-ui实现城市选择三级联动

    vue基于mint-ui实现城市选择三级联动

    这篇文章主要为大家详细介绍了vue基于mint-ui实现城市选择三级联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-04-04
  • Vue2.x中的父组件传递数据至子组件的方法

    Vue2.x中的父组件传递数据至子组件的方法

    这篇文章主要介绍了Vue2.x中的父组件数据传递至子组件的方法,需要的朋友可以参考下
    2017-05-05
  • 使用 vue-i18n 切换中英文效果

    使用 vue-i18n 切换中英文效果

    这篇文章主要介绍了使用 vue-i18n 切换中英文效果,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-05-05

最新评论