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

Question

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

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

我应该怎么办？！

Answer 1

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

\n

\n

所有 props 在子属性和父属性之间形成单向绑定：当父属性更新时，它将向下流到子属性，但反之则不然。这可以防止子组件意外改变父\xe2\x80\x99s状态，这可能会使你的app\xe2\x80\x99s数据流更难以理解。

\n

\n

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

\n

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

\n

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

\n

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

\n