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

您可能感兴趣的文章:

  • Vue.js动态组件解析
  • Vue动态组件实例解析
  • vuejs动态组件给子组件传递数据的方法详解
  • Vue.js render方法使用详解
赞 (0)

相关推荐

  • Vue动态组件实例解析

    前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动态组件 <div id="example"> <button @click="change">切换页面</button> <component :is="currentView"></compon

  • Vue.js render方法使用详解

    前注: 版本限制: Vue.js 2.0+ 1.0无法使用 没耐心,只关心有什么用的,想知道其大概是获取什么东西后生成的,可以直接看结尾的总结 非使用render方法的情况 完整代码: <!DOCTYPE html> <html> <head> <title>Vue的render方法说明</title> <script src="https://unpkg.com/vue@2.1.10/dist/vue.js">&

  • vuejs动态组件给子组件传递数据的方法详解

    通过子组件定义时候的props可以支持父组件给子组件传递数据,这些定义的props在子组件的标签中使用绑定属性即可,但是如果使用的是<component>动态组件,这个时候就没有显式的子组件标签,要给子组件传递数据需要在<component> 中进行绑定 <div class="app" id="deviceready"> <component :is="currentView" :user_name.s

  • Vue.js动态组件解析

    本篇资料来于官方文档:http://cn.vuejs.org/guide/components.html#u52A8_u6001_u7EC4_u4EF6 本文是在官方文档的基础上,更加细致的说明,代码更多更全. 简单来说,更适合新手阅读 ①简单来说: 就是几个组件放在一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示. ②动态切换: 在挂载点使用component标签,然后使用v-bind:is="组件名",会自动去找匹配的组件名,如果没有,则不显示: 改变挂载的组件,

  • 基于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 变化时改变! --> </compo

  • vue2.0全局组件之pdf详解

    vue2.0全局组件之pdf详解

    目的:像elementUI那样注册全局组件 预览pdf文件 技术支持:使用火狐的pdf.js http://mozilla.github.io/pdf.js/ 准备:新建一个CPdf.vue文件,把火狐demo里面的build里面的pdf.js下载来,并且依赖了elementUI开发的其实就是用了<el-button> 编写: template <template> <div class="cpdf"> <div class="cen

  • vue2.0自定义指令示例代码详解

    1.什么是指令? 指令通常以"v-"作为前缀, 以方便Vue知道你在使用一种特殊的标记. 除了 Vue 核心携带着的一些默认指令(v-model 和 v-show)之外, Vue 还允许你注册自己的自定义指令.某些情况下,还是需要对普通元素进行一些底层 DOM 访问, 这也是自定义指令仍然有其使用场景之处. 2.全局指令: 当页面加载时,元素将获取焦点,事实上,在访问页面时,如果你还没有点击任何地方,上面的输入框现在应该处于获取焦点的状态.现在让我们构建指令以完成此效果: <te

  • Vue2.0 $set()的正确使用详解

    vue2.0 给data对象新增属性,并触发视图更新 如下代码,给 student对象新增 age 属性 data () { return { student: { name: '', sex: '' } } } 众所周知,直接给student赋值操作,虽然可以新增属性,但是不会触发视图更新 mounted () { this.student.age = 24 } 原因是:受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除.因为 Vue.js 在初始化实例时将属性转为 getter

  • 手动实现vue2.0的双向数据绑定原理详解

    手动实现vue2.0的双向数据绑定原理详解

    一句话概括:数据劫持(Object.defineProperty)+发布订阅模式 双向数据绑定有三大核心模块(dep .observer.watcher),它们之间是怎么连接的,下面来一一介绍. 为了大家更好的理解双向数据绑定原理以及它们之间是如何实现关联的,先带领大家复习一下发布订阅模式. 一.首先了解什么是发布订阅模式 直接上代码: 一个简单的发布订阅模式,帮助大家更好的理解双向数据绑定原理 //发布订阅模式 function Dep() { this.subs = []//收集依赖(也就是

  • vue全局组件与局部组件使用方法详解

    vue全局/局部注册,以及一些混淆的组件 main.js入口文件的一些常用配置, 在入口文件上定义的public.vue为全局组件,在这里用的是pug模版 .wraper 的形式相当于<div class=wraper></div> -main.js文件 **main.js入口文件的内容** import Vue from 'vue' import App from './App' import router from './router' // 引入公用组件的vue文件 他暴漏的

  • 详解Weex基于Vue2.0开发模板搭建

    详解Weex基于Vue2.0开发模板搭建

    前言 最近有一些人反馈说在面试过程中常常被问到weex相关的知识,也侧面反映的weex的发展还是很可观的,可是目前weex的开发者大多数是中小型公司或者个人,大公司屈指可数,揪其原因可能是基于weex的开发正确的姿势大家并没有找到,而且市面上的好多轮子还是.we后缀的,众所周知,weex和vue一直在努力的进行生态互通,而且weex实现web标准化是早晚的问题,今天和大家分享一下weex基于vue2.0的开发框架模板~ 工作原理 先简单熟悉一下weex的工作原理,这里引用一下weex官网上的一直

  • 基于vue2.0+vuex的日期选择组件功能实现

    基于vue2.0+vuex的日期选择组件功能实现

    calendar vue日期选择组件 一个选择日期的vue组件 基于vue2.0 + vuex 原本是想找这样的一个组件的,查看了vuex后,发现vuex的写法还不是基于2.0的,所以就自己动手做了 demo展示&&项目中的使用 目录结构 demo 用vue-cli 的webpack-simple构建的 calendar |--dist build生成的目录 |--doc 展示图片 |--src |--assets 资源 |--components |--calendar 日期组件 |--

  • Vue2.0父子组件传递函数的教程详解

    Vue.js 是什么 Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动. 学习笔记:在vue2.0中,父组件调用子组件时,想要将父组件中的函数体也做传递. 1. 通过props :需要从子组件传参数到父组件时适

  • 基于vue2.0的活动倒计时组件countdown(附源码下载)

    基于vue2.0的活动倒计时组件countdown(附源码下载)

    这是一款基于vue2.0的活动倒计时组件,可以使用服务端时间作为当前时间,在倒计时开始和结束时可以自定义回调函数.   查看演示       下载源码 安装 npm install vue2-countdown --save 使用组件 首先在模板部分添加: <template> <div> <count-down v-on:start_callback="countDownS_cb(1)" v-on:end_callback="countDown

随机推荐