vue 顶级组件

netScorpion 发布于2019-08-23 12:27 / 905人阅读

摘要：类似组件库的组件或者组件。错了哦，这是一条错误消息通过函数就可以调用组件方法。在线实例文档地址如果是一些全局性的组件，或者顶层组件，就可以考虑在生命周期永久实例化，绑定在的原型上，方便开发的时候调用。

快

有时候懒的把一些通用组件写到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的原型上，方便开发的时候调用。

GPU云服务器云服务器 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98535.html

如何实现一个这样的级联组件

摘要：封装组件系列文章如何实现一个这样的级联组件组件背景根据产品原型实现一个级联组件，下面看演示图应用场景很多，如后台管理系统，旅游系统，广告投放系统，营销系统等，现在流行，，三大框架，下面看看怎么使用实现实现逻辑产品经理的评审功能需求如下根据大 Vue封装组件系列文章如何实现一个这样的级联组件组件背景根据产品原型实现一个级联组件，下面看演示图 showImg(https://i.lo...

daydream 2019-08-26 10:11 评论0 收藏0
EggBorn.js：一款顶级Javascript全栈开发框架

摘要：是什么是一款顶级全栈开发框架。渐进式开发由于模块的高度内聚，可以将业务以模块的形式沉淀，在多个项目中重复使用，既可贡献到开源社区，也可部署到公司内部私有仓库。模块发布当项目中的模块代码稳定后，可以将模块公开发布，贡献到开源社区。 EggBorn.js是什么 EggBorn.js是一款顶级Javascript全栈开发框架。 EggBorn.js是采用Javascript进行全栈开发的最佳...

dayday_up 2019-08-21 17:17 评论0 收藏0
Cabloy.js：基于EggBorn.js开发的一款顶级Javascript全栈业务开发框架

摘要：文档官网文档演示是什么是一款顶级全栈开发框架。不重复造轮子，而是采用业界最新的开源技术，进行全栈开发的最佳组合。渐进式开发由于模块的高度内聚，可以将业务以模块的形式沉淀，在多个项目中重复使用，既可贡献到开源社区，也可部署到公司内部私有仓库。文档官网 && 文档演示 PC：https://admin.cabloy.com Mobile： showImg(https://seg...

tomlingtm 2019-08-22 18:47 评论0 收藏0
Vue官方推荐的风格指南

摘要：官方推荐的风格指南个人笔记最近刚注意到官方多了一个风格指南的推荐。中始终用组件命名因为官方推荐风格命名，所以能用就用组件命名单词应该是完整的单词完整单词带易读性的好处，和书写麻烦的缺点。 Vue官方推荐的风格指南-个人笔记最近刚注意到vue官方多了一个vue风格指南的推荐。因为业务中一直用的vue，所以梳理学习一下，来增加自己代码的规范性，效果不错也可以安利到团队。文档没有对JS...

null1145 2019-08-22 18:28 评论0 收藏0
Vue前端开发规范

摘要：正例复制代码反例复制代码组件数据组件的必须是一个函数。正例更好的做法复制代码反例这样做只有开发原型系统时可以接受复制代码为设置键值总是用配合。这条规则只和单文件组件有关。基于Vue官方风格指南整理一、强制1. 组件名为多个单词组件名应该始终是多个单词的，根组件 App 除外。正例：exportdefault{name:TodoItem,//...}复制代码反例：exportdefault{n...

番茄西红柿 2021-11-29 10:50 评论0 收藏2637