这几天整理的一下过往的文章和笔记,备份到了 Github 上,地址👉 blog。
如果我的内容帮助到了您,欢迎点个 Star
🎉🎉🎉 鼓励鼓励 :) ~~ 👆
在 Composition API 中,我们没有 this
与 Options API 中相同的引用。
在 Options API 中,我们可以调用 console.log(this)
的任何选项并获得对组件本身的引用,让我们可以访问它的 props
、computed
、data
等。
Vue3 允许我们使用 Composition API,这些功能都位于 setup
函数内。这意味着 setup
是我们声明响应式数据、方法和计算属性的地方。
import { ref } from 'vue'
export default {
props: {
lastName: String
},
setup() {
// 没有 this,我们如何使用 props?
const createdMethod = () => {
console.log('created')
}
const name = ref('hello')
createdMethod()
return {
createdMethod,
name
}
}
}
setup
在我们的组件实例实际创建之前运行,并且由于我们的 setup
函数是我们实际上为组件定义所有内容的地方,因此不再使用 this
。
如何访问组件属性?
Composition API 为我们提供了访问重要组件信息(如 props
和 slot
)的替代方法。
setup
函数有参数让我们访问一些组件属性: