computed用get和set写法怎么传参
时间: 2024-03-15 09:46:52 浏览: 152
vue.js的computed,filter,get,set的用法及区别详解
在Vue.js中,computed属性也可以使用get和set方法来定义。如果要给computed属性传递参数,可以使用JavaScript的闭包来实现。
例如,假设我们要计算一个矩形的面积,可以定义一个名为`area`的computed属性,使用get和set方法来实现:
```
computed: {
area: {
get() {
return this._area
},
set(value) {
this._area = value
}
}
}
```
在这个例子中,我们定义了一个名为`area`的computed属性,使用get和set方法来获取和设置计算出的面积。为了给这个computed属性传递参数,我们可以使用JavaScript的闭包,在getter函数中返回一个接收参数的函数,在setter函数中调用这个函数并传入计算出的面积。
例如,我们可以定义一个名为`calculateArea`的函数,用于计算矩形的面积,并将这个函数作为getter函数的返回值:
```
computed: {
area: {
get() {
return (width, height) => {
return width * height
}
},
set(value) {
// 调用calculateArea函数计算面积
const area = this.calculateArea(value.width, value.height)
this._area = area
}
}
},
methods: {
calculateArea(width, height) {
return width * height
}
}
```
在这个例子中,我们将`area`的getter函数定义为一个接收width和height参数的函数,用于计算矩形的面积。在setter函数中,我们调用`calculateArea`函数计算出面积,并将面积存储在一个名为`_area`的变量中。
这样,我们就可以通过给`area`传递width和height参数来计算出矩形的面积了:
```
this.area = { width: 10, height: 20 } // 设置矩形的宽度和高度
console.log(this.area(10, 20)) // 计算矩形的面积,并输出结果
```
阅读全文