zoukankan      html  css  js  c++  java
  • vue 顶级组件

    有时候懒的把一些通用组件写到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
  • 相关阅读:
    Delphi中 弹出框的用法
    VC++代码上传到VSS上 注意事项
    VC++ 屏蔽掉警告
    IIS LocalDB 登录失败
    SVN版本回滚实战
    Git常用命令图解
    C# 百度API地址坐标互相转换
    Quartz.NET浅谈一 : 简单Job使用(定时发送QQ邮件)
    发布自己的类库包到Nuget
    C# 常用日期取得
  • 原文地址:https://www.cnblogs.com/lalalagq/p/9901095.html
Copyright © 2011-2022 走看看