使用 props 如何更新 Vuejs 中的数据？答案

【问题标题】：Using props how to update the data in Vuejs?使用 props 如何更新 Vuejs 中的数据？
【发布时间】：2022-01-22 18:54:35
【问题描述】：

组件

<template>
  <div>
    <b>Vuejs dynamic routing</b>
    <div v-for="item in items" :key="item.id">
      <b>{{ item.id }}.</b> &nbsp;&nbsp;&nbsp;
      <router-link
        @update="updateValue"
        :to="{ name: 'UserWithID', params: { id: item.id, items: items } }"
      >
        {{ item.val }}{{ item.kk }}
      </router-link>
    </div>
    <br /><br /><br />

    {{ $route.params.id }}
  </div>
</template>

Vuejs中如何使用props更新数据？

我有两个组件，分别称为 helloworld 和 User。我已经模拟了 helloworld.vue 中的数据。现在使用道具来获取用户组件内部的数据并执行更新操作。尝试执行逻辑时。

点击按钮的位置。它会去方法，但不更新逻辑

我保留了控制台。内部方法。及其印刷。但逻辑没有更新

【问题讨论】：

嘿@Sundar，您收到警告和错误，因为在 HelloWorld 组件中，您正在使用路由器链接切换组件。并且 User 组件需要没有被传递的 items 道具。
{ required: true, default: () => {}, } 仅表示必须传递一个值，而不是传递它。
请看看这是否能解决您的问题。 codesandbox.io/s/exciting-ptolemy-35bsb?file=/src/components/….
是的，它只是为了展示如何清除您遇到的错误。您希望代码实现什么功能，您能解释一下吗？

标签： javascript vue.js

【解决方案1】：

如 cmets 中所述，您在控制台中遇到错误，因为您没有将项目作为道具传递给用户组件，并且它是用户组件中的必填字段。

对于第二点，您应该将数据存储在一个单独的文件中，而不是在主组件中，这样当再次渲染父组件时，items 数组就不会再次被初始化。为简单起见，最好的选择是全局存储（vuex），现在只是作为示例，它是一个单独的文件。

这是一个示例沙盒，希望对您有所帮助：

https://codesandbox.io/s/exciting-ptolemy-35bsb?file=/src/components/User.vue

【讨论】：

因为路由器链接被用来在组件之间切换。因此，我们必须以某种方式使数据与来自 User 组件的更新数据同步，这在没有任何外部源的情况下是不可能的，因为我们无法通过带有路由器链接的发射来监听外部事件。