vue3计算属性中set方法中传一个参数的作用
时间: 2024-05-16 15:18:14 浏览: 15
在 Vue3 中,计算属性的 set 方法可以接收一个参数。这个参数表示计算属性被赋值的新值。如果你需要在计算属性被赋值时做一些额外的操作,例如更新一些数据或者触发一些事件,那么这个参数就非常有用。
举个例子,假设我们有一个计算属性 `fullName`,它是由 `firstName` 和 `lastName` 计算而来。我们希望当 `fullName` 被赋值时,同时更新 `firstName` 和 `lastName`。这时候我们可以在 `fullName` 的 set 方法中接收新值,然后解析出 `firstName` 和 `lastName`,并将它们分别赋值为解析出来的值。
具体实现如下:
```
const app = Vue.createApp({
data() {
return {
firstName: '',
lastName: ''
}
},
computed: {
fullName: {
get() {
return `${this.firstName} ${this.lastName}`
},
set(value) {
const [firstName, lastName] = value.split(' ')
this.firstName = firstName
this.lastName = lastName
}
}
}
})
```
这样,在模板中我们就可以直接使用 `v-model` 来绑定 `fullName` 了:
```
<input v-model="fullName">
```
当我们在输入框中输入一个新的名字时,`fullName` 的 set 方法就会被调用,并根据新的值更新 `firstName` 和 `lastName`。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)