vue2.0 dynamic components and render usage instructions

This time I will bring you the instructions for using vue2.0 dynamic components and render. What are the precautions for using vue2.0 dynamic components and render. Here is a practical case, let’s take a look.

is as follows:

<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>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related matters on the php Chinese website article!

Recommended reading:

vue.js routing is invalid and cannot be used

How to operate the vue function calling sequence

The above is the detailed content of vue2.0 dynamic components and render usage instructions. For more information, please follow other related articles on the PHP Chinese website!