vue3 use指令挂载记录

最新推荐文章于 2024-06-19 10:00:50 发布

Li_Ning21

最新推荐文章于 2024-06-19 10:00:50 发布

阅读量162

点赞数 1

文章标签： Vue3

本文链接：https://blog.csdn.net/Li_Ning21/article/details/138247271

版权

本文介绍了如何在Vue2项目中封装一个全局pdf生成插件，通过修改Vue原型并配置全局属性，展示了如何在main.js中正确导入和使用`$getPdf`函数以生成PDF文件。

摘要由CSDN通过智能技术生成

install(Vue, options) {
	Vue.prototype.getPdf = function (title, id, load) {}
}

// plugin 封装
 install(app) {
 	app.config.globalProperties.$getPdf = function (title, id, load) {
	}
}

// 具体使用 注意要 将main.js 中的createApp实例export出来
import { app } from '@/main';
app.use(htmlToPdf);
ctx.$getPdf('BlingBling.pdf', route.query.id, _loading);

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Li_Ning21

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue3-clipboard:for Vue 3的剪贴板.js绑定

04-28

vue3剪贴板 Vue 3的绑定。该存储库是Inndy用于Vue3的插件的端口... use ( VueClipboard ) . mount ( '#app' ) 导入特定组件的v-clipboard指令例子将v-clipboard指令应用于元素 < input v - model = "value" /

Vue3 & app.use 与 install 函数的作用

cookcyq__的博客

10-20

9526

以上代码的作用在 vue 官方都有解释，但它还隐藏了与 vue-cli 构建有关的一个很有用的功能，类似的，其它插件如 i18n、vuex、vant 等都要借助 app.use 引入，构建属于自己的组件库，这样既可以单独维护，也可以减少主体项目的代码量。命令，此命令可以将文件打包成一个可作为依赖导入的 js 库，在 vue3 中，默认初始化 vue 的方式是这样的。方法，实现组件自引，一个库不止一个组件，你可以在。方法会在引入插件时自动被 vue 调用，方法，是的，组件本身也是一个对象，

1 条评论您还未登录，请先登录后发表或查看评论

vue3通过vue.use创建自定义指令

柑橘乌云_

03-03

2343

大家经常看到如下用法：但是axios就不需要用这种方式引入，而是直接使用，原因是 axios 没有 install。以自定义指令举例，也可以自定义组件。install 是默认的方法。当外界在 use 这个组件的时候，就会调用本身的 install 方法，同时传一个 Vue 这个类的参数// install 是默认的方法。当外界在 use 这个组件的时候，就会调用本身的 install 方法，同时传一个 Vue 这个类的参数。if (!}, 5000);});// 导出。

vue3利用install/app.use（）挂载公共方法组件

weixin_51445493的博客

08-17

1538

代码】vue3利用install/app.use（）挂载公共方法组件。

Vue.use()的用法和install的用法解释

轻风细雨_林木木

02-22

1863

一、介绍在vue的main.js中，我们经常使用Vue.use(xx)方法。比如我们引入elementUI，在main.js中，我们一般通过如下代码引入： import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) 二、为什么这样做？官方解释安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 insta

Vue3应用API——use解析

最新发布

lotte

06-19

9092

基于 Vue 3 Composition API 的高质量 Hooks 库

深入Vue3源码，看看Vue.use后究竟发生了什么？

JackChan

01-10

639

深入Vue3源码，看看Vue.use后究竟发生了什么？

最新版（vue3.3版本）获取全局挂载实例属性/方法

启猿泰坦的博客

07-07

513

获取全局挂载的属性/方法。

Vue.use( ) 和 install方法使用

a2739294436的博客

11-14

919

一.使用 1.在组件my.js创建组件 //在组件my.js组件 //引入全局组件 import HButton from '../components/button.vue' import Hinput from '../components/input.vue' //存储组件的名 const components = [ HButton, Hinput, ] const My = { install(Vue) { //1.注册全局组件 compon...

vue3:全局API(应用实例)

qq_39460057的博客

02-29

1093

应用一个全局 mixin (适用于该应用的范围)。一个全局的 mixin 会作用于应用中的每个组件实例。如果只传递一个名字，则会返回用该名字注册的组件 (如果存在的话)。如果同时传递一个名字和一个指令定义，则注册一个全局指令；如果只传递一个名字，则会返回用该名字注册的指令 (如果存在的话)。每个应用实例都会暴露一个 config 对象，其中包含了对这个应用的配置设定。一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。提供一个值，可以在应用中的所有后代组件中注入使用。卸载一个已挂载的应用实例。

[vue3] app.use实现

aXin_li的博客

06-19

562

从源码上看， use的实现还是比较简单。

vue 自定义组件，通过vue.use来使用，install的使用

ilovexiaoming1的博客

04-21

864

vue 自定义组件，类似引入elementUI的方法，通过vue.use(ElementUI)来使用第一步：定义一个组件components/star/index.vue <template> <div> <span v-for="item in 5" :key="item" :class="item <= scoreNumber ? 'icon-star-full':'icon-star-empty'" @click="setScore

vue.use()与vue.install()

weixin_40974684的博客

04-30

1046

关于vue.use()与vue.install() vue官方文档官网是这样写的：https://cn.vuejs.org/v2/guide/plugins.html 应用可对http进行一下封装将get 和post 方法作为vue 的实例方法 const createHttpPlugin = () => { return { install(Vue) { Vue.prototype.$post = axios.post; Vue.prototype.$get

vue nvue 全局挂载

05-05

在 Vue 中，我们可以通过全局挂载（global mounting）将某些组件、插件等注册到全局中，这样在应用的任何一个组件中都可以使用这些全局注册的内容。对于组件的全局挂载，我们可以使用 Vue.component() 方法来注册一个全局组件，例如： ``` Vue.component('my-component', { // ... 组件选项 ... }) ``` 对于插件的全局挂载，我们可以使用 Vue.use() 方法来安装一个全局插件，例如： ``` Vue.use(myPlugin) ``` 对于指令的全局挂载，我们可以使用 Vue.directive() 方法来注册一个全局指令，例如： ``` Vue.directive('my-directive', { // ... 指令选项 ... }) ``` 对于过滤器的全局挂载，我们可以使用 Vue.filter() 方法来注册一个全局过滤器，例如： ``` Vue.filter('my-filter', function (value) { // ... 过滤器实现 ... }) ``` 对于混入的全局挂载，我们可以使用 Vue.mixin() 方法来注册一个全局混入，例如： ``` Vue.mixin({ // ... 混入选项 ... }) ``` 对于原型方法的全局挂载，我们可以使用 Vue.prototype 来添加一个全局的实例方法，例如： ``` Vue.prototype.$myMethod = function () { // ... 实例方法实现 ... } ``` 以上是常见的全局挂载方式，可以根据具体需求选择合适的方式进行全局挂载。