0
点赞
收藏
分享

微信扫一扫

Vue Context 参数 - Composition API

后来的六六 2022-07-27 阅读 75

这几天整理的一下过往的文章和笔记,备份到了 Github 上,地址👉 ​​blog​​。


在 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​​​ 函数有参数让我们访问一些组件属性:​​props​​​ 和 ​​context​​。

  • ​props​​​ — 在我们的组件中包含定义的​​props​
  • ​context​​ — 是一个 Javascript 对象,它公开了三个组件属性

这三个属性是:

  • ​context.attrs​​ – 传递给我们组件的props 属性
  • ​context.slots​​ – 具有我们所有模板插槽渲染功能的对象
  • ​context.emit​​ – 我们的组件发出事件的方法

让我们更深入地了解其中的每一个。

context.attrs

假设我们有一个自定义组件,它接受一个名为 ​​value​​ 的 prop。

export default {
props: {
value: String,
},
setup(props, context) {
console.log(context.attrs)
}
}

然后在父组件中,我们向它传递几个属性。

<template>
<custom-component
:value="value"
test="hi"
@close="close"
/>
</template>

将打印:

Vue Context 参数 - Composition API_插槽

context

可以看到,它包含除了我们声明的 ​​props​​ 之外的所有内容。这包括事件监听器和 HTML 属性之类的东西。

这里的一个重要说明是 ​​attrs​​​ 不是响应式的。这意味着如果我们想应用副作用来响应 ​​attrs​​​ 值的变化,我们应该改用 ​​onUpdated​​ 生命周期钩子。

context.slots

​context.slots​​​让我们可以访问每个 ​​slot​​​ 的 ​​render​​ 方法。当我们编写自己的自定义渲染函数而不使用模板代码时,这很有用。

Vue 建议在大多数用例中使用模板,但如果你真的想使用 JavaScript 的全部功能,我们可以创建自己的渲染函数。

​​Vue 文档​​​中使用自定义 ​​render​​​ 方法的一个很好的例子是,如果我们正在创建一个组件,该组件根据 ​​prop​​ 的值渲染具有不同级别标题的插槽值。

<template>
<div>
<h1 v-if="level == 1">
<slot />
</h1>
<h2 v-if="level == 2">
<slot />
</h2>
<h3 v-if="level == 3">
<slot />
</h3>
<h4 v-if="level == 4">
<slot />
</h4>
<h5 v-if="level == 5">
<slot />
</h5>
<h6 v-if="level == 6">
<slot />
</h6>
</div>
</template>

<script>
export default {
props: {
level: Number
}
}
</script>

在这段代码中,我们对所有 6 个标题选项使用 ​​v-if​​​ 和 ​​v-else-if​​ 条件。正如您所看到的,有很多重复的代码,而且看起来非常混乱。

相反,我们可以使用 ​​render​​​ 函数以编程方式生成我们的标题。使用 Composition API ​​setup​​ 函数,它看起来像这样。

import { h } from 'vue'
export default {
props: {
level: Number
},
setup(props, context) {
return () => h('h' + props.level, {})
}
}

但是,我们如何让我们的插槽进行渲染?

这就是 ​​context.slots​​ 发挥作用的地方。

通过让我们访问每个插槽的渲染函数,我们可以轻松地将插槽添加到渲染函数中。每个插槽都可以通过其名称访问,并且由于我们没有明确命名插槽,因此将其命名为 ​​default​​。

import { h } from 'vue'
export default {
props: {
level: Number
},
setup(props, context) {
return () => h('h' + props.level, {}, context.slots.default())
}
}

现在,如果我们使用像这样的简单父组件来运行它

<template>
<child-component :level="1">
Hello World
</child-component>
</template>

这是我们完成的 DOM 的样子。

Vue Context 参数 - Composition API_javascript_02

image

因此,您可能不会经常使用 ​​context.slots​​,但是当您编写复杂的 JavaScript 渲染函数时,它是一个强大的功能。

注意:根据 Vue 文档,​​render​​​ 函数的优先级高于根据 ​​template​​ 选项或挂载元素的 DOM 内 HTML 模板编译的渲染函数。

context.emit

​context.emit​​​ 将替换 ​​this.$emit​​ 作为我们从组件发出事件的方式。

这对于向父组件发送任何类型的事件(带或不带数据)非常有用。

假设我们有一个关闭按钮,它发出一个名为 ​​close​​ 的事件。

<template>
<div>
<button @click="close">X</button>
</div>
</template>

<script>
export default {
setup (props, context) {
const close = () => {
context.emit('close')
}
return {
closeModal
}
}
}
</script>

然后在我们的父组件中,我们可以使用 ​​v-on/@​​​ 指令监听这个 ​​close​​ 事件。

<modal-component @close="handleClose" />

我们在 ​​setup​​ 中无权访问什么

到目前为止,我们已经看到了 Composition API 如何使我们能够访问四个不同的属性:​​props​​​、​​attrs​​​、​​slots​​​ 和 ​​emit​​。

但是由于 ​​setup​​ 在创建我们的组件实例之前运行,我们将无法访问这三个组件属性:

  • ​data​
  • ​computed​
  • ​methods​

例如,这些是我们在 ​​setup​​​ 自身内部声明的属性,但我们没有内置方法来访问所有 ​​data​​ 属性的列表。

举报

相关推荐

0 条评论