方法一、
<template>
<input type="text" v-model='componentName'>
<button @click='add'>click me to add a component</button>
</template> <script>
// 引入要添加的所有组件
import component1 from './components/component1.vue'
import component2 from './components/component2.vue'
export default {
data: function() {
return {
allComponents: [],
componentName: ''
}
},
components: {
// 注册所有组件
component1,
component2
}
methods: {
add: function() {
this.allComponents.push(this.componentName)
// 重置输入框
this.componentName = ''
},
render: function(h) { // h 为 createElement 函数,接受三个参数
// tag
// data
// children 具体看文档吧
return h('div',this.allComponents.map(function(componentName) {
return h(componentName)
}))
}
}
}
</script>
方法二、

html

  <div id="app">
<button @click="add('a-component', 'test')">Add A</button>
<button @click="add('b-component', 'test')">Add B</button>
<ul>
<li :is="item.component" :text="item.text" v-for="item in items"></li>
</ul>
</div>

javascript

var AComponent = Vue.extend({
props: ['text'],
template: '<li>A Component: {{ text }}</li>'
}) var BComponent = Vue.extend({
props: ['text'],
template: '<li>B Component: {{ text }}</li>'
}) new Vue({
el: '#app',
components: {
'a-component': AComponent,
'b-component': BComponent,
},
data: {
items: []
},
methods: {
add(component, text) {
this.items.push({
'component': component,
'text': text,
})
}
}
})

方法三、

我是写在父组件中的:

Vue.component('mycontent', {
props: ['content'],
data() {
return {
coms: [],
}
},
render: function(h) {
this.coms = [];
for(var i = 0; i < this.content.length; i++) {
this.coms.push(h(this.content[i], {}))
}
return h('div', {},
this.coms)
},
});

调用的时候


<mycontent v-bind:content="content"></mycontent>

那么父组件中的content变化时,就会动态加载组件了

 

vue2.0动态添加组件的更多相关文章

  1. vue2.0 动态切换组件

    组件标签是Vue框架自定义的标签,它的用途就是可以动态绑定我们的组件,根据数据的不同更换不同的组件. <!DOCTYPE html> <html lang="en" ...

  2. 基于vue2.0的分页组件开发

    今天安排的任务是写基于vue2.0的分页组件,好吧,我一开始是觉得超级简单的,但是越写越写不出来,写的最后乱七八糟的都不知道下句该写什么了,所以重新捋了思路,小结一下- 首先写组件需要考虑: 要从父组 ...

  3. Vue2.0的通用组件

    饿了么基于Vue2.0的通用组件开发之路(分享会记录)   Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库. ...

  4. Angular使用总结 --- 通过指令动态添加组件

    之前自己写的公共组件,都是会先引入,需要调起的时候再通过service控制公共组件状态.值.回调函数什么的.但是有一些场景不适合这种方式,还是动态添加组件更加好.通过写过的一个小组件来总结下. 创建组 ...

  5. vue2.0实现分页组件

    最近使用vue2.0重构项目, 需要实现一个分页的表格, 没有找到合适的组件, 就自己写了一个, 效果如下: 该项目是使用 vue-cli搭建的, 如果你的项目中没有使用webpack,请根据代码自己 ...

  6. easyui 动态添加组件 要重新渲染

    做项目时动态添加组件是常有的事,easyui动态添加组件时样式会失效,这是因为这个组件没有经过 easyui的解析器解析, 比如:   <pre name="code" cl ...

  7. 饿了么基于Vue2.0的通用组件开发之路(分享会记录)

    Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网 ...

  8. vue2.0 如何自定义组件(vue组件的封装)

    一.前言 之前的博客聊过 vue2.0和react的技术选型:聊过vue的axios封装和vuex使用.今天简单聊聊 vue 组件的封装. vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼 ...

  9. Android 6.0动态添加权限

    Android 6.0加入了动态权限,权限有普通权限和危险权限两种,其中危险权限在6.0以上的手机是需要动态添加权限的,举例:拨打10086//-----------------布局文件------- ...

随机推荐

  1. Linux页面回收概述

    本文主要介绍了一些page reclaim机制中的基本概念.这份文档其实也可以看成阅读ULK第17章第一小节的一个读书笔记.虽然ULK已经读了很多遍,不过每一遍还是觉得有收获.Linux内核虽然不断在 ...

  2. Java 发送邮件工具包---未完待续

    开头先来介绍一片好文章: http://blog.itpub.net/15182208/viewspace-730172/

  3. javascript常用字符串函数和本地存储

    concat将两个或多个字符的文本组合起来,返回一个新的字符串.var a = "hello";var b = ",world";var c = a.conca ...

  4. 深入理解Docker Volume(二)

      一开始,认为Volume是用来持久化的,但是这实际上不对,因为认为Volume是用来持久化的同学一定是认为容器无法持久化,所以有了Volume来帮助容器持久化,事实上,容器会一直存在,除非你删除他 ...

  5. silverlight打开和保存文件

    因为Silverlight是运行在浏览器中的客户端,所以对于程序的操作权限要求比较严格,以本篇的主题来说,一个表现就是不能够随意的进行文件打开和保存操作,如果在代码中直接使用Stream来操作文件,会 ...

  6. [Jobdu] 题目1500:出操队形

    题目描述: 在读高中的时候,每天早上学校都要组织全校的师生进行跑步来锻炼身体,每当出操令吹响时,大家就开始往楼下跑了,然后身高矮的排在队伍的前面,身高较高的就要排在队尾.突然,有一天出操负责人想了一个 ...

  7. Bash Shell中Shift用法分享

    这篇文章主要介绍了Bash Shell中Shift的使用方法,需要的朋友可以参考下 shift可以用来向左移动位置参数.Shell的名字 $0第一个参数 $1第二个参数 $2第n个参数 $n所有参数 ...

  8. 【Android】3.8 定位图层展示

    分类:C#.Android.VS2015.百度地图应用: 创建日期:2016-01-27 一.简介 Android定位SDK v6.2.2(全球定位支持)提供GPS.基站.Wi-Fi等多种定位方式,适 ...

  9. qsort函数以及sort函数使用方法

     sort函数的使用方法 做ACM题的时候,排序是一种常常要用到的操作. 假设每次都自己写个冒泡之类的O(n^2)排序,不但程序easy超时,并且浪费宝贵的比赛时间,还非常有可能写错. STL里面 ...

  10. seajs加载jquery插件

    假设有如下一个名为get-data的jq插件: (function($) { $.fn.getData= function() { console.log($(this).attr('data')) ...