vue 框架中,使用this应该怎么用
时间: 2023-12-25 09:06:39 浏览: 20
在 Vue 组件中,使用 this 可以访问到组件实例。this 关键字可以用于访问组件的数据、方法和生命周期钩子函数。下面是几个常见的使用示例:
1. 访问组件内的数据:
```
data() {
return {
message: 'Hello, Vue!'
}
},
mounted() {
console.log(this.message) // 输出:'Hello, Vue!'
}
```
2. 访问组件内的方法:
```
methods: {
showMessage() {
console.log(this.message)
}
},
mounted() {
this.showMessage() // 输出:'Hello, Vue!'
}
```
3. 在生命周期钩子函数中使用:
```
created() {
console.log(this.message) // 输出:'Hello, Vue!'
}
```
需要注意的是,如果在回调函数中使用 this,需要使用箭头函数或者在回调函数外部保存 this 的值。例如:
```
mounted() {
let self = this
setTimeout(function() {
console.log(self.message) // 输出:'Hello, Vue!'
}, 1000)
}
```
或者使用箭头函数:
```
mounted() {
setTimeout(() => {
console.log(this.message) // 输出:'Hello, Vue!'
}, 1000)
}
```