1-Vue组件化实战【进阶】（3）

这节完成弹窗组件

知识点 Vue.extend，render 函数

由于弹框为了更好的灵活控制，则不写在 #app 节点里面，写在了body的下一级

弹窗组件 Alert.vue

接下来是调用 弹窗的方法时, 将弹窗挂载 body 下

import Vue from 'vue'
import component from '@/components/alert/Alert.vue'

function create(props) {
  // 组件构造函数如何获取？
  // 1.Vue.extend()
  // 2.render
  const vm = new Vue({
    // h是createElement, 返回VNode，是虚拟dom
    // 需要挂载才能变成真实dom
    render: h => h(component, {props}),
  }).$mount() // 不指定宿主元素，则会创建真实dom，但是不会追加操作

  // 获取真实dom
  document.body.appendChild(vm.$el)

  const comp = vm.$children[0]

  // 删除
  comp.remove = function() {
    document.body.removeChild(vm.$el)
    vm.$destroy()
  }

  return comp

  // Vue.extend 方法
  // const Con =  Vue.extend(component)
  // // Vue.extend 传入props, 需要这样传 new Con({ propsData: props })
  // const vm = new Con({ propsData: props }).$mount()

  // // 手动添加 dom 到页面
  // document.body.appendChild(vm.$el)
  // 此时vm 为渲染的组件自身
  // //   删除
  // vm.remove = function() {
  //     document.body.removeChild(vm.$el)
  //     vm.$destroy()
  // }
}

export default create

最后是调用方式

 改成插件的形式

import Vue from 'vue'
import Alert from '@/components/alert/Alert.vue'

function Create(com,props) {
    // 此处 vm 为 new Vue 传入配置后的实例，节点渲染在 $children
    const vm = new Vue({
        // h是createElement, 返回VNode，是虚拟dom
        // 需要挂载才能变成真实dom
        render: h => h(com, { props })
    }).$mount() // 挂载 - 不指定宿主元素，则会创建真实dom，但是不会追加操作

    // 手动添加 dom 到页面
    document.body.appendChild(vm.$el)

    vm.$children[0].remove = function() {
        document.body.removeChild(vm.$el)
        vm.$destroy()
    }


    // Vue.extend 方法
    // const Con =  Vue.extend(component)
    // // Vue.extend 传入props, 需要这样传 new Con({ propsData: props })
    // const vm = new Con({ propsData: props }).$mount()

    // // 手动添加 dom 到页面
    // document.body.appendChild(vm.$el)
    // 此时vm 为渲染的组件自身
    // //   删除
    // vm.remove = function() {
    //     document.body.removeChild(vm.$el)
    //     vm.$destroy()
    // }
}

export default {
    install(Vue) {
        Vue.prototype.$alert = function(options){
            return Create(Alert, options)
        }
    }
}

main.js