是否可以更改 Vue 组件中方法的 props 值? [英] 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 的值，但道具值未更新.

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;
      }
  }
}

我不知道如何从函数中改变 props 的值.Vue中可以更新props的值吗??

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 警告]:避免直接改变 prop，因为它的值将是每当父组件重新渲染时被覆盖.相反，使用一个基于道具值的数据或计算属性.道具变异: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 组件中方法的 props 值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！