vue 顶级组件

2024年4月18日 215次阅读 来源: 发条橙子

快

有时候懒的把一些通用组件写到template里面去，而业务中又需要用到，比如表示loading状态这样组件。

如果是这样的组件，可以选择把组件手动初始化，让组件在整个app生命周期中始终保持活跃。

如：

// a.js
import Vue from 'vue'

import hello from './hello.vue'


  const wrapInstance = new Vue({
    render(h) {
      return h(hello, {})
    }
  })

  const wrap = wrapInstance.$mount() // 渲染成DOM
  document.body.appendChild(wrap.$el) // 把DOM插入节点
  const helloInstance = wrapInstance.$children[0] // 拿到的是当前的vue实例，hello实例是当前的子组件
export default helloInstance
// main.js
import helloInstance from 'a.js'
Vue.prototype.$someName = helloInstance

实例化一个vue组件，挂在到原型链 或者 项目root vue实例上，就可以通过函数式的调用组件的方法。在APP生命周期内可以永不摧毁，方便调用。

类似Element组件库的loading组件 或者 message组件。

this.$message.error('错了哦，这是一条错误消息')通过函数就可以调用Message组件方法。

在线实例
element文档地址

如果是一些全局性的组件，或者顶层组件，就可以考虑在生命周期永久实例化，绑定在VUE的原型上，方便开发的时候调用。

    原文作者：发条橙子
    原文地址: https://segmentfault.com/a/1190000016752860
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞