Skip to content

Latest commit

 

History

History
222 lines (164 loc) · 6.54 KB

Vue Context 参数 — Composition API.md

File metadata and controls

222 lines (164 loc) · 6.54 KB
Raw

Vue Context 参数 — Composition API

在 Composition API 中，我们没有 this 与 Options API 中相同的引用。

在 Options API 中，我们可以通过 this 访问任何选项并获得对组件本身的引用，让我们可以访问它的 props、computed、data 等。

Vue 3 允许我们使用 Composition API，这些功能都位于 setup 函数内。这意味着 setup 是我们声明响应式数据、方法和计算属性的地方。

Tips：Vue 3.2 新增 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>

将打印：

context

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

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

context.slots

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

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

Vue 渲染函数 & JSX中使用自定义 h() 方法的一个很好的例子是，如果我们正在创建一个组件，该组件根据 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 条件。正如你所看到的，有很多重复的代码，而且看起来非常混乱。

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

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

Tips：在 Vue 2 中，它是 render 选项，在 Vue 3 中，它使用 h 替代。

但是，如何让我们的插槽进行渲染？

这就是 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 的样子。

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 属性的列表。也不推荐在 Vue 3 中混用 Vue 2 的写法/功能。

关于 Composition API 的问题，可以查看 Composition API FAQ。