laravel - 是否可以从 Vue 组件中的方法更改 props 值？

Question

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

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

现在，通过单击按钮，我正在调用函数 updateCoachStatus 来更改 propRoomSelected 的值，但 Prop 值未更新。

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

我不知道如何从函数中改变 props 的值。 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属性(property)和 $emit input事件。上面链接的示例也显示了它的工作原理。