是否可以从Vue组件中的方法更改道具值? [英] Is it possible to change props value from method in Vue component?
问题描述
我有一个组件,我正在将值543传递给props:prop-room-selected,
I have a component and i am passing value 543 to props :prop-room-selected,
<navigation-form :prop-room-selected='543'>
</navigation-form>
现在,通过单击按钮,我正在调用函数updateCoachStatus来更改propRoomSelected的值,但是props的值未更新.
Now, From a button click, i am calling the function updateCoachStatus to change the value of propRoomSelected, but the props value is not updating.
{
template: '#navigation-form',
props: ['propRoomSelected'],
data: function () {
return {
roomSelected: this.propRoomSelected,
}
},
methods:{
updateCoachStatus: function(event){
this.propRoomSelected = 67;
}
}
}
我不知道如何从功能更改道具的价值. Vue是否可以更新道具的价值?
I dont know how to change the value of props from function. Is it possible in Vue to update the value of props??
推荐答案
您正在做的事情将在Vue中(在控制台中)发出警告.
What you are doing will throw a warning in Vue (in the console).
[Vue警告]:避免直接更改道具,因为该值将是 父组件重新渲染时覆盖.相反,请使用 数据或基于属性值的计算属性.道具被 变异:"propRoomSelected"
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "propRoomSelected"
该值实际上会更改组件的内部 ,而不更改组件外部的 .父属性的值不能在组件内部更改,并且实际上,如果父因任何原因重新渲染,则更新后的值将丢失.
The value will actually change inside the component, but not outside the component. The value of a parent property cannot be changed inside a component, and, in fact, the updated value will be lost if the parent re-renders for any reason.
要更新父级属性,您需要做的是$emit
更新后的值并侦听父级中的更改.
To update the parent property, what you should do is $emit
the updated value and listen for the change in the parent.
Vue.component("navigation-form",{
template: '#navigation-form',
props: ['propRoomSelected'],
data: function () {
return {
roomSelected: this.propRoomSelected,
}
},
methods:{
updateCoachStatus: function(event){
this.$emit("update-room-selected", 67) ;
}
}
})
然后在您的父模板中监听事件
And in your parent template listen for the event
<navigation-form :prop-room-selected='propRoomSelected'
@update-room-selected="onUpdatePropRoomSelected">
</navigation-form>
这是一个示例.
这是一种常见的模式,Vue实现了一个指令以使其更容易使用,称为v-model
.这是一个支持v-model
的组件,该组件将执行相同的操作.
This is a common pattern and Vue implemented a directive to make it slightly easier called v-model
. Here is a component that supports v-model
that will do the same thing.
Vue.component("navigation-form-two",{
template: '#navigation-form-two',
props: ['value'],
data: function () {
return {
roomSelected: this.value,
}
},
methods:{
updateCoachStatus: function(event){
this.$emit("input", 67) ;
}
}
})
在父模板中
<navigation-form-two v-model="secondRoomSelected">
本质上,要使组件支持v-model
,应接受value
属性,并接受$emit
input
事件.上面链接的示例也显示了工作原理.
Essentially, for your component to support v-model
you should accept a value
property and $emit
the input
event. The example linked above also shows that working.
这篇关于是否可以从Vue组件中的方法更改道具值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!