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

【问题标题】：Is it possible to change props value from method in Vue component?是否可以从 Vue 组件中的方法更改道具值？
【发布时间】：2017-09-27 19:26:40
【问题描述】：

我有一个组件，我正在将值 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的值？？

【问题讨论】：

如果子组件中的数据在<input>标签中，是否可以省略发出和更新？我之所以问，是因为我正在将道具复制到本地并通过 <input> 中的 v-model 对本地进行变异，道具会自动更新。
你是如何复制数据的？您是在进行克隆还是深度克隆，或者只是将道具值分配给子组件中的数据？如果你直接给子组件数据赋值prop值，那么本地数据还是有父数据的引用。所以，从技术上讲，它也会更新道具数据。

标签： laravel laravel-5.3 vuejs2 vue-component

【解决方案1】：

您所做的将在 Vue（在控制台中）中引发警告。

[Vue 警告]：避免直接改变一个 prop，因为它的值会是每当父组件重新渲染时被覆盖。相反，使用基于道具值的数据或计算属性。道具存在变异：“propRoomSelected”

这个值实际上会改变inside组件，而不是outside组件。父属性的值不能在组件内更改，事实上，如果父属性因任何原因重新渲染，更新后的值将丢失。

要更新父属性，你应该做的是$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 事件。上面链接的示例也显示了它的工作原理。

【讨论】：

如果我需要更新 3 个或更多属性，我需要为每个属性创建一个方法并分别处理每个属性，还是有更好的方法？

【解决方案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
    }
  }
}

【讨论】：