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

Question

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

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

现在,从按钮单击,我调用函数updateCoachStatus来更改propRoomSelected的值,但props值不更新.

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

我不知道如何从功能中改变道具的价值.是否有可能在Vue中更新道具的价值？

Answer 1

你正在做什么将在Vue(在控制台中)发出警告.

[Vue警告]:避免直接改变道具,因为只要父组件重新渲染,该值就会被覆盖.而是根据prop的值使用数据或计算属性.Prop变异:"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>

这是一个例子.

这是一种常见的模式,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事件.上面链接的示例也显示了工作.