(四)03 -JavaScript 方式调用的组件——$mount()不带参数，会把组件在内存中渲染完毕 & Vue.extend()根据组件对象，创建一个组件的构造函数& $el组件对应的dom元素

JavaScript 方式调用的组件——$mount()不带参数，会把组件在内存中渲染完毕 & Vue.extend()根据组件对象，创建一个组件的构造函数 & $el组件对应的dom元素

需求： JS方式调用弹出框

步骤：

1.把.vue文件当成模块加载到index.js中

import MyModal from './index.vue'

2.通过Vue.extend()方法传入一个组件对象MyModal，返回一个构造函数Modal

const Modal = Vue.extend(MyModal)

3.给vue的所有实例增加一个$modal，调用一次$modal就要创建一个弹出框对象-vue实例，

4.通过传一个show属性进行呈现

instance.show = true

5.在index.vue中接收这个show，默认是false

data () {
    return {
      show: false
    }
  },

6.如果值value或show是true，组件就进行呈现-index.vue文件(见上文)

   //v-show="value || show  子组件接收value的值是true时是显示  false时是隐藏
    <div class='modal-mask' v-show="value || show">

7.在index.js中创建的组件对象instance通过$mount()去渲染定义这个组件对象modal

      // 把渲染好的组件替换掉了参数中的dom元素
      // instance.$mount(document.body)

      // $mount()不带参数，会把组件在内存中渲染完毕
      const modal = instance.$mount()

8.组件对象modal有属性$el,$el对应的就是组件的dom元素，把它直接添加到body里面

 // $el就是组件对应的dom元素
  // modal.$el
document.body.appendChild(modal.$el)

9.组件封装结束，在main.js中导入这个组件

import Modal from './components/modal/index.js'

10.main.js中注册插件

// 注册插件
Vue.use(Modal)

组件的本质是模块

Vue.extend( options ) 传一个组件对象，返回构造函数

• 参数：

  • {Object} options

• 用法：

  使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

  data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数

  <div id="mount-point"></div>
  

  // 创建构造器
  var Profile = Vue.extend({
    template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
    data: function () {
      return {
        firstName: 'Walter',
        lastName: 'White',
        alias: 'Heisenberg'
      }
    }
  })
  // 创建 Profile 实例，并挂载到一个元素上。$mount——把创建好的组件挂载到指定位置
  new Profile().$mount('#mount-point')
  

  结果如下：

  <p>Walter White aka Heisenberg</p>
  

• 参考：组件

vm.$mount()

• 参数：

  • {Element | string} [elementOrSelector]
  • {boolean} [hydrating]

• 返回值：vm - 实例自身

• 用法：

  如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。

  如果没有提供 elementOrSelector 参数，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中。

  这个方法返回实例自身，因而可以链式调用其它实例方法。

• 示例：

  var MyComponent = Vue.extend({
    template: '<div>Hello!</div>'
  })
  
  // 创建并挂载到 #app (会替换 #app)
  new MyComponent().$mount('#app')
  
  // 同上
  new MyComponent({ el: '#app' })
  
  // 或者，在文档之外渲染并且随后挂载
  var component = new MyComponent().$mount()
  document.getElementById('app').appendChild(component.$el)
  

• 参考：

  • 生命周期图示
  • 服务端渲染

在index.vue的同层级目录里，创建vue插件文件index.js文件

// 导入了一个弹出框对象
import MyModal from './index.vue'

// Vue的插件
export default {
  install (Vue, options) {
    // 根据组件对象，创建一个组件的构造函数
    const Modal = Vue.extend(MyModal)    
    
    Vue.prototype.$modal = function () {
      // 调用一次$modal就要创建一个弹出框对象
      // 创建一个组件对象  构造函数可以创建很多对象
      const instance = new Modal()
      // 告诉组件呈现
      instance.show = true
      // 把组件添加到dom中

      // 把渲染好的组件替换掉了参数中的dom元素
      // instance.$mount(document.body)

      // $mount()不带参数，会把组件在内存中渲染完毕
      const modal = instance.$mount()
      // $el就是组件对应的dom元素
      // modal.$el
      document.body.appendChild(modal.$el)
    }
  }
}

在 Modal.vue 的同级目录创建 js 文件

import Model from './Modal.vue'

// 导出 vue 的创建
export default {
  install (Vue, option) {
    // 使用 Vue.extend 基于组件，创建一个组件的构造器
    const MyModal = Vue.extend(Model)
		
    // 设置 vue 的全局方法
    Vue.prototype.$modal = ({
      show
    }) => {
      // 创建组件的实例
      const instance = new MyModal()
      instance.isShow = show
      // 获取组件编译的结果
      const element = instance.$mount().$el
      // 添加到页面
      document.body.append(element)
    }
  }
}

在 main.js 中注册插件

import Modal from './components/Modal'
Vue.use(Modal)