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中是否可以更新props的值

Answer 1

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

[Vue警告]：避免直接改变道具，因为该值将是父组件重新渲染时会覆盖。相反，使用基于prop值的数据或计算属性。支持存在变异：＆＃34; propRoomSelected＆＃34;

该值实际上会更改内部组件，但不会在组件之外。父组件的值不能在组件内更改，事实上，如果父级因任何原因重新渲染，更新后的值将丢失。

要更新父属性，您应该做的是$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组件中的方法更改道具值？

2 个答案: