方法一、
<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. 超低压差LDO XC6206P332MR

    XC6206:It is selectable in 0.1V increments within a range of 1.2V to 5.0V. 可实现压差为0.1V的降压,最大输出电流200毫安 ...

  2. PI专利网站

    PI专利网站: 1.http://www.powerint.com/company/patents/trademarks 2.http://patft.uspto.gov/netacgi/nph-Pa ...

  3. Model实例化类属性与值使用反射拼接成SQL语句

    public string GetInsertSqlByModel(Object o) { StringBuilder sbStart = new StringBuilder(); StringBui ...

  4. redis实践:用户注册登录功能

    本节将使用PHP和Redis实现用户注册登录功能,下面分模块来介绍具体实现方法. 1.注册 需求描述:用户注册时需要提交邮箱.登录密码和昵称.其中邮箱是用户的唯一标识,每个用户的邮箱不能重复,但允许用 ...

  5. regAsm的历史问题

    regAsm是用来注冊.卸载dll成为通用库的一个工具.关于regAsm的具体资料请參照http://msdn.microsoft.com/en-us/library/tzat5yw6(v=vs.11 ...

  6. Hadoop2.x介绍与源代码编译

    1.Hadoop 项目的四大模块 Hadoop Common: The common utilities that support the other Hadoop modules. Hadoop D ...

  7. Sampling and Estimation

    Sampling and Estimation Sampling Error Sampling error is the difference between a sample statistic(t ...

  8. JMeter学习笔记(六)-负载与监听

    1. 场景设计 场景设计的原则:忠于用户实际操作,组合用户的各种操作到场景中来. JMeter场景主要通过线程组设置来完成的,对于复杂场景还需要与逻辑控制器配合完成. 2.场景设置 JMeter线程组 ...

  9. C# RSA数据加密

    第一步产生密钥类 CreateKey using System; using System.Collections.Generic; using System.Linq; using System.T ...

  10. static_cast、dynamic_cast、reinterpret_cast、和const_cast

    关于强制类型转换的问题,很多书都讨论过,写的最详细的是C++ 之父的<C++ 的设计和演化>.最好的解决方法就是不要使用C风格的强制类型转换,而是使用标准C++的类型转换符:static_ ...