Explication détaillée des composants dynamiques et du rendu de vue2.0

Cet article partage principalement avec vous l'explication détaillée des composants dynamiques et du rendu de vue2.0. J'espère qu'il pourra vous aider.

est la suivante :

<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 &#39;@/assets/scripts/lib/zepto.min&#39;
 //console.log($);
 //import Vue from &#39;vue&#39;
 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: &#39;<h3 v-for="item in items">{{ item.c}}</h3>&#39;,
 props: [&#39;myData&#39;],
 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(&#39;p&#39;, Array.apply(null, { length: num }).map(function (v,index) {
  return createElement(&#39;h3&#39;, items[&#39;c_&#39;+index][&#39;c&#39;].toString())
  }))
 } else {
  return createElement(&#39;h1&#39;, &#39;没有数据!&#39;);
 }
 }
 };
 // 注册
 //Vue.component(&#39;my-component&#39;, MyComponent);
export default {
 name: &#39;bar&#39;,
 data () {
 return {
  msg: &#39;Bar&#39;,
  fuck: &#39;Hello&#39;,
  items: data,
  currentView: MyComponent
 }
 },
 methods:{
 addData : function(){
  for(let p in data) {
   if(p == &#39;c_&#39;+num) {
    data[p] = {&#39;c&#39;: num };
   } else {
    data[&#39;c&#39;+num] = {&#39;c&#39;: 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>

Recommandations associées :

Explication détaillée de l'utilisation de composants dynamiques personnalisés de vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!