vue2.0中组建里面套用组件_Vue中如何动态添加组件

一般我们在写vue组件的时候，都是写一个单文件，后通过import的方式将组件引入到当前页面中

import Component from './components/component'

export default {

...

components: {

Component

}

...

}

而在element-ui中，像弹窗这种类型的组件，组件库都会提供一种函数调用创建的方式动态地渲染这个组件

import { Message } from 'element-ui';

Message.success(options)

很显然，对于这种全局性非常强的组件来说，使用函数调用的方式是更加方便的，在需要的时候通过函数调用动态地创建一个vue实例，这样就免去了在template中通过v-if或者v-show的方式去提前将组件引入到页面中了。

那下面我们来试试如何用函数的方式去创建类似弹窗的组件

import createMessage from './message/index.js'

// 我们通过下面的方式创建一个

{{ test }}

并挂载在body上

createMessage({

props: {

text: '这是一个弹窗'

}

})

下面是message/index.js，我们这里用单文件的方式去创建，比较直观并且较好维护

import Vue from 'vue'

// 弹窗组件单文件

import Message from './message.vue'

const createMessage = (options) => {

// 获取body并且创建一个新的div节点

let body = document.body,

bindPhone = document.createElement('div')

// 给创建的div设置id=message，并且添加到body后

bindPhone.setAttribute('id', 'message')

body.appendChild(bindPhone)

// 这里我们return一个新的Vue实例并且将实例挂载到我们刚创建的DOM节点上

return new Vue({

render: (h) => {

return h(

Message,

{

props: {

text: options.props.text

}

}

)

}

}).$mount('#message')

}

export default createMessage

上面render后的函数写法可查看渲染函数 & JSX — Vue.js，通过这种方式可传入props等参数到组件中

{{ text }}

export default {

props: [

'text' // 这里是我们刚才创建vue实例传入的props

]

...

}

这样我们就可以在body中直接动态地将我们的弹窗组件挂载上去了

注：返回的Vue实例可以访问this中的相关属性和方法哦