当前位置: 首页 > news >正文

vue3挂载全局方法和组件

话不多说直接上代码

main.js

import { createApp } from 'vue'
import App from './App.vue'const app = createApp(App)// 注册全局方法和组件
function myMethod(){console.log('Hello, world!');
}
app.provide("myMethod", myMethod) // provide注册全局方法 inject获取
import _ from 'lodash' // lodash方法
app.provide("_", _)// component全局组件注册
import JgEmpty from '@/components/empty/index.vue'
app.component("JgEmpty", JgEmpty)app.mount('#app')

具体某个A.vue页使用

<template><div><!-- 全局组件直接使用 --><JgEmpty :description="'无数据'" /><!-- lodash使用 --><div>{{ _.round(1.2344,3) }}</div></div>
</template>
<script>
import {defineComponent, inject} from 'vue' // 按需引入ref函数
export default defineComponent({components: {},name: 'testPage',setup() {let myMethod = inject("myMethod")      //  通过 inject 可以获取到 全局实例上 通过 provide  所注入的参数值。myMethod()let _ = inject("_")// 将变量和函数返回,以便在模版中使用return {myMethod,_,}}
})
</script>
http://www.lryc.cn/news/124370.html

相关文章:

  • mybatisplus学习笔记
  • go mod 添加私有库GOPRIVATE
  • 07-HDFS入门及shell命令
  • TiDB在科捷物流神州金库核心系统的应用与实践
  • React 18 更新 state 中的数组
  • 【css】css中使用变量var
  • 判断自己网络所在的NAT类型
  • ClickHouse(十九):Clickhouse SQL DDL操作-1
  • 小程序保留2位小数据,不四舍五入
  • 【linux-nginx】nginx限流以及控制访问方法
  • 菜单和内容滚动的联动原理及代码
  • Python爬虫:单线程、多线程、多进程
  • 超强的Everything,吊打系统自带文件搜索功能!
  • flink配置参数
  • 学习Vue:安装Vue.js和设置开发环境
  • 代理技术在网络安全、爬虫和数据隐私中的多重应用
  • Python 3 使用Hadoop 3之MapReduce总结
  • KU Leuven TU Berlin 推出“RobBERT”,一款荷兰索塔 BERT
  • Postern中配置和使用Socks5代理指南
  • android 窗口级模糊实现方式
  • 面试热题(数组中的第K个最大元素)
  • HTTP2协议介绍
  • 矩阵的转置
  • web集群学习:nginx+keepalived实现负载均衡高可用性
  • MFC第二十九天 CView类的分支(以及其派生类的功能)、MFC六大关键技术
  • SpringBoot复习:(37)自定义ErrorController
  • Linux学习之防火墙概述
  • JS_围绕圆形滑动
  • Ubuntu上安装RabbitMQ
  • 统计学和机器学习之间的联系和区别