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

vue.js进阶 专栏收录该内容
40 篇文章 1 订阅

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有属性 e l , el, 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)

  • 1
    点赞
  • 0
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值