vue向后端传多个参数,vue组件如何进行参数传递
本文主要介绍了如何在Vue的指令中传递更多的参数，有很好的参考价值，希望对你有所帮助。如有错误或不足之处，请不吝赐教。
目录
概述基本原理：基于闭包的扩展方案的实例和代码实现；将Main.js中的指令对应的插件全球化；定义图像加载管理类的ImageLoad插件定义；Vue 3.0的实施
概要
在我们使用Vue的开发项目中，经常使用directive封装一系列DOM操作，非常方便。一般来说，指令在App中使用动态指令参数获取数据。
但是，有时候自定义指令需要更多的数据来完成更复杂的功能，比如在指令中调用当前App实例的nextTick方法，确保加载了所有的DOM元素，然后执行DOM操作。在某些情况下，我们需要将一些全局配置参数传递给指令，现有的参数传递方式显然无法满足这些要求。
介绍了一种扩展指令参数的方法，使其可以接收更多的参数。这种方法在Vue 2.0和Vue 3.0中都可以正常使用。
基本原理
本文介绍的指令扩展方法主要基于闭包，并对一些函数参数进行了粗化，以管理多个参数的传递过程。
以Vue2.0的指令定义为例说明基本原理。本文使用的指令定义都是基于插件定义的，插件定义通过use方法在main.js中使用。
示例代码如下：
const myDirective={
安装(应用程序，选项){
app.directive(img-load ，{
bind:function(el，binding，vnode){ }，
已插入：函数(el，binding，vnode){ }，
更新：函数(el，binding，vnode){ }，
componentUpdated:function(el，binding，vnode){ }，
unbind:function(el，binding，vnode){ }，
});
}
};
导出默认myDirective
按照上面的标准指令定义方法，无论使用哪个hook函数，我们都只能传递三个参数，指令绑定的DOM元素，接收指令的APP中的绑定参数和虚拟节点。
基于闭包的扩展方案
指令的钩子函数参数已经固定，我们无法修改。但是我们可以通过闭包来设置钩子函数的作用域，让闭包函数接收更多的参数。
代码如下：
导出默认函数getMyDirective(Vue) {
返回类MyDirective{
构造函数(选项){
this.options=options
this . bind directive=this . bind directive . bind(this)；
}
bindDirective(el，bindings) {
}
}
}
const myDirective={
安装(应用程序，选项){
const directive class=getmy directive(app)；
var my directive=new directive class(options)；
app . directive( my-directive ，{
bind:myDirective.bindDirective
});
}
};
使用闭包函数getMyDirective包装钩子函数。bindDirective闭包函数是用户定义的函数。我们可以在闭包函数中设置任意数量的参数定义类来封装指令的所有操作，构造方法也可以接收参数，从而将多个参数划分为科林蒂安。通过bind方法，指令hook函数绑定的bindDirective方法的this被强制限制为MyDirective的一个实例，即bindDirective方法可以通过this访问更多的数据。JS中的函数有独立的作用域，所以指令的绑定方法bindDirective可以使用闭包函数传递的参数，不受其他外部代码的任何干扰。
实例和代码实现
本文以一个图片自动加载指令为例，介绍了自定义指令的参数扩展方法。
自定义指令的基本功能是根据图片的URL地址加载并显示图片，具体实现包括：
通过指示动态参数获得图像地址。首先，显示正在页面上加载的图片。如果加载成功，通常会显示加载错误的图片。本文自顶向下介绍这个例子的代码实现。
Main.js中将指令对应的插件全局化
使用Use方法全局定义插件ImageLoad。这个插件的主要功能是全局定义一个镜像加载指令，并接收这个指令的全局配置，即加载镜像的地址和失败镜像的地址。
Vue.use.use(ImageLoad，{
正在加载：“http://localhost:4000/images/loading . gif”，
错误：“http://localhost:4000/images/error . JPEG”，
});
ImageLoad插件定义
ImageLoad插件与其他插件一样。既然是要通过use来使用，那么要定义install方法，install方法的第一个参数是当前App实例，第二个是指令的全局配置。
从“”导入getImageLoad。/getImageLoad
const ImageLoad={
安装(应用程序，选项){
const img class=getImageLoad(app)；
var loadImage=new ImgClass(选项)；
app.directive(img-load ，{
bind: loadImage.bindImage
});
}
};
导出默认图像加载；
在install方法中，首先通过调用getImageLoad方法获取加载图片的管理类，并将其传入当前App实例中。实例化图像加载管理类的对象loadImage，并传入图像加载的全局配置。定义自定义指令v-img-load，指定的绑定钩子方法指向loadImage中的bindImage方法。这个bindImage方法指向loadImage对象，因此它可以使用应用程序实例、全局配置和loadImage对象中的数据。
图片加载管理类的定义
ImageLoadManagement定义了v-img-load指令的完整实现。
导出默认函数getImageLoad(Vue) {
返回类ImageLoadManagement {
构造函数(选项){
this.options=options
this . bindimage=this . bindimage . bind(this)；
this . render image=this . render image . bind(this)；
}
bindImage(el，bindings) {
const self=this
Vue.nextTick(function(){
const src=bindings.value
self.renderImage(loading ，src，El)；
self.loadImage(src)。然后(
()=self.renderImage(，src，el)，
()=self.renderImage(error ，src，el)，
);
});
}
loadImage(src) {
返回新承诺((解决，拒绝)={
const img=new Image()；
img.src=src
img.onload=resolve
img.onerror=reject
});
}
renderImage(type，src，el) {
let _ src
常数{
错误，
装货
}=this.options
开关(类型){
案例“装载”:
_src=正在加载；
打破；
案例“错误”:
_src=错误；
打破；
默认值：
_ src=src
打破；
}
el.setAttribute(src ，_ src)；
}
}
}
为了避免参数过多，所以采用柯里化的方法，对参数进行了分割：
在闭包函数getImageLoad中，定义了全局App实例参数；ImageLoadManagement类的构造方法中定义了图像加载指令所需的全局配置参数。作为类功能的语法糖，其本质来源于功能，从而实现独立的范围。App实例的nextTick可以直接在bindImage方法中使用。无论指令是在父组件中使用还是在子组件中使用，当执行指令中的代码时，都可以加载所有DOM元素。loadImage方法用于检查指定URL的图片是否存在，如果存在，则显示具体图片，否则显示加载失败的图片。renderImage方法用于设置由指令绑定的Img元素的图像地址。图像的实际地址可以通过bindings参数的value属性获得。通过上述方法，我们不仅扩展了指令的参数，使其能够支持更复杂的业务逻辑。
更重要的是。我们实现了指令定义和实现逻辑的解耦，不再需要把所有的指令实现逻辑都放在指令注册方法中。通过ImageLoadManagement的定义，所有的指令实现逻辑都内聚在其中。
Vue 3.0的实现
在Vue 3.0中，指令参数的扩展方法与2.0相同，但由于Vue 3.0中指令的钩子函数名与2.0中的不同，所以有一些区别。
具体代码如下：
从“”导入getImageLoad。/getImageLoad
const ImageLoad={
安装(应用程序，选项){
const img class=getImageLoad(options)；
var loadImage=new img class()；
app.directive(img-load ，{
已安装：loadImage.bindImage
});
}
};
导出默认图像加载；
导出默认函数getImageLoad(选项){
返回类ImageLoadManagement {
构造函数(){
this.options=选项
这个。bindimage=this。bindimage。绑定(这个)；
这个。渲染图像=this。渲染图像。绑定(这个)；
}
bindImage(el，bindings) {
const src=bindings.value
this.renderImage(loading ，src，El)；
this.loadImage(src).然后（
()=this.renderImage(，src，el)，
()=this.renderImage(error ，src，el)，
);
}
loadImage(src) {
返回新承诺((解决，拒绝)={
const img=new Image()；
img.src=src
img.onload=resolve
img.onerror=拒绝
});
}
renderImage(type，src，el) {
let _ src
常数{
错误，
装货
}=this.options
开关（类型){
案例"装载":
_src=正在加载；
打破；
案例"错误":
_src=错误；
打破；
默认值：
_ src=src
打破；
}
el.setAttribute(src ，_ src)；
}
}
}
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。