是否可以通过 Vue 组件中的方法更改道具值？

Question

我有一个组件，我将值 543 传递给道具 :prop-room-selected，

<navigation-form :prop-room-selected='543'>
</navigation-form>

现在，通过单击按钮，我正在调用函数 updateCoachStatus 来更改 propRoomSelected 的值，但是道具值没有更新。

{
    template: '#navigation-form',
    props: ['propRoomSelected'],
    data: function () {
      return {
        roomSelected: this.propRoomSelected,
      }
  },
  methods:{
      updateCoachStatus: function(event){
         this.propRoomSelected = 67;
      }
  }
}

我不知道如何从函数中更改道具的值。 Vue中是否可以更新props的值？？

Answer 1

您正在做的事情将在 Vue 中（在控制台中）发出警告。

[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"

该值实际上会在组件内部发生变化，但不会在组件外部发生变化。父级属性的值无法在组件内部更改，事实上，如果父级出于任何原因重新呈现，更新后的值将丢失。

要更新父级属性，您应该做的是 $emit 更新后的值并监听父级的变化。

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

并在您的父模板中监听事件

<navigation-form :prop-room-selected='propRoomSelected'
                 @update-room-selected="onUpdatePropRoomSelected">
</navigation-form>

这是一个example.

这是一个常见的模式，Vue 实现了一个指令，使其更容易调用 v-model。这是一个支持 v-model 的组件，它会做同样的事情。

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 事件。上面链接的例子也表明工作正常。

Answer 2

另一种方法是使用 computed 属性来处理道具：

{
  template: '#navigation-form',
  props: ['propRoomSelected'],
  data () {
    return {
      roomSelected: this.computedRoomSelected,
      changeableRoomSelected: undefined
    }
  },
  computed: {
    computedRoomSelected () {
      if (this.changeableRoomSelected !== undefined) {
        return this.changeableRoomSelected
      }
      return this.propRoomSelected
    }
  },
  methods: {
    updateCoachStatus (event) {
      this.changeableRoomSelected = 67
    }
  }
}

是否可以通过 Vue 组件中的方法更改道具值？

Is it possible to change props value from method in Vue component?

laravel

vue-component

laravel-5.3

vuejs2