vuejs 组件与复用,可复用的VUE实例称为
将可独立分离的public不断提取为独立的可复用组件向上提供调用，使我们的代码更便于组织和管理，扩展性更强。下面这篇文章主要介绍vue3组件开发可复用应用的相关信息，有需要的可以参考一下。
目录
自定义指令基本结构自定义v-loading指令插件基本结构实现一个全局状态管理插件瞬移传输相关链接总结可重用性也是组件开发的一个优点，可以让代码更加简洁、优雅、维护方便。下面主要描述vue3中一些能体现复用性的API的应用。
自定义指令
指令(指令)是带有v前缀的特殊属性。
v-文本v-显示v-如果.等等。是vue中的一些内置指令。当这些内置指令不能满足我们的要求时，此时也可以使用自定义指令。
基本结构
const app=Vue.createApp({})
//注册全局自定义指令
app.directive(loading ，{
已安装(el，装订){}，
已更新(el，binding) {}，
//.
})
自定义指令对象可以提供以下钩子函数:
Created:在应用绑定元素的属性或事件侦听器之前调用。当需要在调用普通v-on事件侦听器之前将指令附加到事件侦听器时，这很有用。BeforeMount:当指令第一次绑定到一个元素并在挂载父组件之前被调用时。Mounted:在绑定元素的父组件安装后调用。Before:在更新包含组件的VNode之前调用。Updated:在包含组件的VNode及其子组件的 VNode更新后调用。BeforeUnmount:在卸载绑定元素的父组件之前调用unmounted:仅当指令与元素解除绑定并且父组件已被卸载时调用一次。钩子函数的一些参数:
包含两个参数，el和binding。El是指令绑定到的元素。这可以用来直接操作DOM。绑定包含以下对象：
实例：使用指令的组件实例。值：传递给指令的值。例如，在v-my-directive=1 1 中，值为2。OldValue:以前的值，仅在beforeUpdate和updated中可用。无论值是否已更改，都可用。Arg:传递给指令的参数(如果有)。例如，在v-my-directive:foo中，arg是 foo 。修改器：包含修改器的对象，如果有的话。例如，在v-my-directive.foo.bar中，修饰符对象是{foo: true，bar: true}。Dir:注册指令时作为参数传递的对象。动态指令传递参数:
V-mydir:[t]=val //T传递了参数
t的值可以通过hook函数的参数binding.arg获得，val的值可以通过binding.value获得.
自定义 v-loading 指令
首先写一个LoadingIcon.vue组件，内容是加载样式。
模板
div class=k_loading_mask
div class=loading-icon
SVG view box= 0 0 1024 1024 xmlns= http://www . w3 . org/2000/SVG
路径填充=currentColor
d= M512 64a 32 32 0 1 32 32v 192 a32 32 0 0 1-64 0 v96a 32 32-32zm 0 640 a32 32 0 1 32 32 32 32 32 32 0 1-64 0 v736a 32 32 32 0 1-64 0 v736 a 32 32 32 0 1 32 0 1 32 zm 448-192 a32 32 240.448 a32 32 0 0 1 0-45.248 zm 452.544 452.544 a32 32 0 1 45.248 0l 828.8 783.552 a32 32 0 1-45.248 45.248 l 647.744 692.992 a32 32 0 0 1 0-45.248 zm 1928.8 1995.248
/路径
/svg
/div
div class=tips{{ tips }}/div
/div
/模板
脚本设置
从“vue”导入{ ref }；
const tips=ref( loading )；
/脚本
样式lang=scss 。加载-图标{
宽度：30px
高度：30px
颜色：# fff
svg {
动画：旋转2s线性无限；
显示：内嵌-块；
宽度：100%;
身高：100%;
}
}。k_loading_mask {
宽度：100%;
身高：100%;
背景色：rgba(0，0，0，6);
显示器：flex
对齐-内容：居中；
对齐-项目：居中；
位置：绝对；
top:0；
左：0;
z指数：1000;
}。提示{
颜色：# fff
}
/风格
创建一个射流研究…文件src/directives/loading.js，导出自定义指令的对象：
导出默认值{
已安装(el，装订){
//插入元素
const app=创建app(加载图标)；
const instance=app。挂载(文档。createelement( div )；
el.instance=实例
埃尔。appendchild(El。实例$ El)；
埃尔。风格。position= relative
},
已更新(el，绑定){
},
};
根据用户传给指令的参数，动态设置提示文字：
已安装(el，装订){
//.
//提示文字
if (binding.arg) {
埃尔。实例。提示=装订。arg
}
}
指令绑定的值变化时，设置显示或隐藏加载：
已更新(el，绑定){
如果(!binding.value) {
埃尔。移除子对象(El。实例。$ El)；
}否则{
埃尔。appendchild(El。实例$ El)；
}
},
全局注册自定义指令：
const App=create App(应用程序)；
从导入装载指令/装载。js’；
app.directive(loading ，加载);
使用垂直加载指令：
模板
div v-loading= show loading class= loading-box /div
div v-loading:[tips loading]= show loading class= loading-box 2
一些内容.
/div
/模板
脚本设置
const show loading=ref(true)；
const tipsLoading=ref(请稍后);
const close=()={
showLoading.value=！showLoading.value
}
/脚本
插件
插件是自包含的代码，通常向某视频剪辑软件添加全局级功能。它可以是公开安装()方法的对象，也可以是功能。
每当插件被添加到应用程序中时，如果它是一个对象，就会调用安装方法。如果它是一个功能，则函数本身将被调用。在这两种情况下，它都会收到两个参数：由某视频剪辑软件的createApp生成的应用对象和用户传入的选项。
基本结构
导出一个对象，里面包含安装方法。
导出默认值{
安装：(应用程序，选项)={
//.
}
}
使用插件:
在使用createApp()初始化某视频剪辑软件应用程序后，通过调用使用()方法将插件添加到应用程序中。
const App=create App(应用程序)；
app.use(插件);
实现一个全局状态管理插件
在小型项目中，使用状态管理全局状态管理工具，容易让代码变得冗余复杂，那如果还需要全局的状态管理，这时候就可以自己通过插件的方式实现一个微型汽车版本的全局状态管理。
新建明店网
从“vue”导入{反应性}；
恒定状态=反应({
字符串： 字符串，
});
const minstore={
状态，
};
导出默认值{
安装：(应用)={
app.provide(minstore ，min store)；
},
};
主页。射流研究…安装这个插件：
从导入明斯特雷./分店/分店。js’；
const App=create App(应用程序)；
应用程序使用(明商店).挂载( # app )；
组件中使用明斯托尔
const min store=inject( min store )；
控制台。日志(最小存储。状态)；
p{{ minstore.state.str }}/p
Teleport 传送
先来看一个案例：
div style= position:relative；
div class= model style= position:absolute 模态框/div
/div
内层模态框的定位，是相对于父级的，如果想让它相对于身体定位在全局弹出模态框的话，实现起来可能很麻烦。
传送提供了一种干净的方法，允许我们控制在数字正射影像图中哪个父节点下渲染了HTML。
使用心灵运输及到属性，让Vue "将这个HTML传送到body标签下。
div style= position:relative；
传送到=身体
div v-show= show model class= model style= position:absolute 模态框/div
/瞬间移动
/div
此时，HTML被插入到身体标签下，模态框的定位就相对于身体标签。
相关链接
vue3组件化开发常用应用程序接口
代码演示地址github.com/kongcodes/v…
从0开始vue3项目搭建
总结
这就是这篇关于vue3组件开发的可重用性应用的文章。关于vue3可重用性应用的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。