问题标签 [vue-props]

当我想将我的变量作为道具从一个 vue.js 文件中获取到另一个文件时，它将不起作用。我已经看到这个问题很常见，但答案对我没有帮助。我看不出我的代码有什么问题。也许你可以看看它：

ladaten.vue: (路径: src\components\ladedaten.vue)

LadevorgangAendern.vue（路径：src\pages\LadevorgangAendern.vue）

事实上，我什至不确定组件是否是我需要的。我想暂时存储数据，所以当这工作时，我计划再次使用道具为 ladaten.vue 提供来自另一个页面文件的值。最后，我需要这些值是临时且可变的。我也想到了会话，但我想先用组件尝试一下。你们有什么感想？

I am testing a Vue component that includes a child component. That child components takes 2 props.

In my snapshot test for the parent component, I shallowMount it (so the child component shouldn't render). However, I keep getting a warning saying:

I don't understand why the prop would matter here, since I'm using shallowMount

The child component is nested in my parent component like so:

The snapshot test I have is:

If I comment out all my tests that rely on shallowMount I no longer get the warning. Do I need to stub out the props for the child component? I have used shallowMount before with a component that has child components, and have never had to do that before.

我知道这个问题经常出现在 Stackoverflow 中，但即使有多个答案，我也无法解决我的答案。

我在父组件中使用 axios get 调用，并通过道具将数据发送到子组件。我想将道具传递给数据以重新使用它们来构建图表 vie apexChart。并且该实例无法识别数据。

看来 allDatas 是未定义的。任何想法？

ps：我在父组件中的 axios 调用是在创建的函数中。

谢谢！！

我有两个组件，一个是父级，是一些随机页面，子级是一个将使用的组件，更多的组件用于网格。

家长

孩子

最后看起来类似于：

使用分页换页时；工作但是，给我这个错误：

我读到这个问题是指“Vue 中的道具是一种反模式”。

那么，如何修复呢？

我刚学Vue，现在从props开始。我无法将它们集成到下面的代码中。我想做一个道具name可以发送到greet组件。我想name在组件中显示<greet name="User"></greet>并渲染：<div>Welcome, User!</div>

我需要获取我单击的元素，该元素显示在列表中。并通过 index.html 上的邮件列表标签在我的 vue 实例上的方法上打印此元素

所以我有 Vue 组件，它迭代 json 对象并且只从它的每个元素中打印两个属性：

运行后，我的 index.html 上显示了两个元素，它们是：

• test1@test.com:嗨

• test2@test.com：你好吗？

我想单击这两个元素之一并获取我单击的那个。然后通过 index.html 中的邮件列表标签将其发送到名为 setSelectedMail 的 vue 方法

索引.html：

最后，这是我要从中获取所选邮件的 vue 实例：

我究竟做错了什么？

假设我的 vue.js 应用程序中有以下模式：

表单.vue：

页面1.vue：

页面2.vue：

页面3.vue：

本质上，它是一个三页的表格。父组件是表单，每个页面都是一个子组件。父组件使用其数据跟踪表单字段，并通过 props 将它们传递到每个页面。但这是一个糟糕的设计，因为我通过在每个输入上将它们分配给 v-model 来改变每个子组件中的道具。

我在 Google 上看到的这个问题的大多数解决方案都建议使用计算属性，但是因为我使用的是 v-model，所以我需要维护双向绑定，而计算属性似乎只是单向的。所以我想知道以下是否是解决这个问题的常见模式，这被认为是一个好的设计：

表单.vue：

页面1.vue：

在其他两个子组件中不重复相同的模式，想法是将 props 的值复制到子组件中的数据变量，将数据变量绑定到输入，观察数据变量的变化并发出事件备份当他们改变时给父母。这些发射将带有新值，并且父级会将这些新值分配给其数据变量。

我不需要担心传递给每个子组件的道具会动态变化。我想将它们传递给子组件的唯一原因是用户可能想从草稿中重新加载表单（否则，根本不需要道具）。

我的问题是：这是一个好的设计模式吗？

我有一个使用 OrderTasklistBuilder 组件的订单表单组件。注意：这里有嵌套组件。层次结构如下： OrderSingle > CreateOrderForm > OrderTasklistBuilder 初始订单在 OrderSingle 挂载时获取，然后通过子组件向下传递。

任务列表构建器组件的使用方式如下：

<order-tasklist-builder v-if="form.tasks.length" :initial-tasks="form.tasks" @taskAdded="handleTaskAdded" class="mb-2" />

这工作正常，但如果列表构建器中没有任何任务，组件将不会显示。这是一个问题，因为有人可能会删除所有任务。

现在，如果我删除表单任务的长度检查，即使添加新任务，任务列表构建器组件也不会显示任何任务。

<order-tasklist-builder :initial-tasks="form.tasks" @taskAdded="handleTaskAdded" class="mb-2" />

这些组件相当大（> 300 行），所以如果我可以详细说明某些具体内容，请告诉我。

我有一个函数 changeActive 可以更改活动布尔值的值。但即使活动更改的值（我使用 console.log 检查）新值也不会在 v-bind:'active' 中传递给子组件。

I want to change the value of a boolean after some time and keep repeating the process. Then I want to pass the value to a child component individually. Here changeActive() is the function to change the value of the active boolean. I want to change the value to the first prop then after some time second prop and so on.