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

Question

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

  `<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() 更改 Prop 中的名称，但在控制台中我收到此错误

vue.js:1355 Uncaught TypeError: 'set' on proxy: trap returned falsish for property 'name'

我应该怎么办？!

Answer 1

您不应该尝试从文档更新子组件内部的 Prop :

All props form a one-way-down binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around. This prevents child components from accidentally mutating the parent’s state, which can make your app’s data flow harder to understand.

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

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

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

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