时间戳

首页 > 解决方案 > 如何使用组件中的方法更改 vue 中 props 的值？

javascript - 如何使用组件中的方法更改 vue 中 props 的值？

问题描述

我正在练习 vuejs 在组件之间传输数据，这是我的代码

我的刀片模板：

  `<app-user-details :name="name"></app-user-details>`

然后在我的子组件中：

<template>
   <div>
       <h4>You may view the user details here</h4>
       <p>Many Details</p>
       <p>User name: {{ name }}</p>
       <button @click="resetName">reset name</button>
   </div>
</template>

<script>
export default {
   name: 'app-user-datails',
   props: {
       name: {
           type: String
       }
   },
   methods: {
       resetName() {
        return  this.name = 'Max'
       }
   }
}
</script>

我想通过方法 resetName() 更改道具中的名称，但在控制台中我收到此错误

vue.js:1355 未捕获的类型错误：代理上的“设置”：陷阱为属性“名称”返回错误

我应该怎么办？！

标签： javascriptvue.jsvue-component

解决方案

您不应该尝试从文档更新子组件内部的道具：

所有的 props 在子属性和父属性之间形成一个单向向下的绑定：当父属性更新时，它会向下流向子属性，但不会反过来。这可以防止子组件意外改变父组件的状态，从而使您的应用程序的数据流更难理解。

但是，您可以从子组件发出具有新名称的事件：

  resetName() {
   this.$emit('updateName', 'Max')
  }

并通过监听事件从父级更新它：

 <app-user-details :name="name" @updateName="name = $event"></app-user-details>

推荐阅读