Vue：将对象移交给组件以供其使用

发布于 2025-01-16 14:31:40 字数 417 浏览 0 评论 0原文

在我的应用程序中，我有一个列表组件，我在另一个组件中使用它。目前，它看起来像这样：

<script setup>
const seed = [
  {
    key: value,
    anotherKey: anotherValue,
  },
  // and so on...
];
</script>

<template>
  <ul>
    <li v-for="element in seed" :key="element.key" :anotherKey="element.anotherKey">
  </ul>
</template>

我的问题是：是否可以以某种方式“移交”使用此列表组件的父组件内的对象，而不是从列表组件的脚本标记中获取对象？

原文

In my app I have a list component which I use inside another component. Currently, it looks something like this:

<script setup>
const seed = [
  {
    key: value,
    anotherKey: anotherValue,
  },
  // and so on...
];
</script>

<template>
  <ul>
    <li v-for="element in seed" :key="element.key" :anotherKey="element.anotherKey">
  </ul>
</template>

My question is: Is it possible to somehow "hand over" an object inside the parent component which uses this list component instead of getting the object from within the list component's script tag?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

忆离笙 2025-01-23 14:31:40

您可以在父组件中使用 Provide 将对象传递给子组件。

ParentComponent.vue （未经测试的代码）

<script setup>
const seed = [
  {
    key: value,
    anotherKey: anotherValue,
  },
  // and so on...
];

provide('seed', seed)
</script>

ChildComponent.vue

<script setup>
const seed = inject('seed')
</script>


<template>
  <ul>
    <li v-for="element in seed" :key="element.key" :anotherKey="element.anotherKey">
  </ul>
</template>

您可以阅读有关在组合中提供的内容。
https://vuejs.org/api/composition-api-dependency-injection。 html

You can use provide in your parent component to pass an object to your child components.

ParentComponent.vue (Untested code)

<script setup>
const seed = [
  {
    key: value,
    anotherKey: anotherValue,
  },
  // and so on...
];

provide('seed', seed)
</script>

ChildComponent.vue

<script setup>
const seed = inject('seed')
</script>


<template>
  <ul>
    <li v-for="element in seed" :key="element.key" :anotherKey="element.anotherKey">
  </ul>
</template>

You can read about provide in compositions.
https://vuejs.org/api/composition-api-dependency-injection.html

回复收藏 0 原文

~没有更多了~