[英]How can I change the value of props in vue with a method in a component?
我正在练习 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 未捕获的类型错误:代理上的“设置”:陷阱为属性“名称”返回了错误
我该怎么办?!
您不应该尝试从文档中更新子组件内部的道具:
所有 props 在子属性和父属性之间形成一种单向向下绑定:当父属性更新时,它会向下流到子属性,但不会反过来。 这可以防止子组件意外改变父组件的状态,这会使您的应用程序的数据流更难以理解。
但是,您可以从子组件发出具有新名称的事件:
resetName() {
this.$emit('updateName', 'Max')
}
并通过侦听事件从父级更新它:
<app-user-details :name="name" @updateName="name = $event"></app-user-details>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.