vue2.0 동적 구성 요소 및 렌더링 사용 지침

이번에는 vue2.0 다이나믹 컴포넌트 및 렌더 사용방법을 가져왔습니다. vue2.0 다이나믹 컴포넌트 및 렌더 사용시 주의사항은 무엇인가요?

아래와 같이:

<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 중국어 웹사이트의 다른 관련 기사에 주목하세요!

추천 자료:

vue.js 라우팅이 잘못되어 사용할 수 없습니다.

vue 함수 호출 시퀀스를 작동하는 방법

위 내용은 vue2.0 동적 구성 요소 및 렌더링 사용 지침의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!