Vue mutate prop 由 v-bind 与同步修饰符绑定

Question

我的组件数据中有一个对象。现在，我只是使用v-bind.sync 指令将对象的所有属性作为道具绑定到子组件。我正在使用内置的update 事件从子组件更新这些道具，但我仍然在控制台中收到Avoid mutation props directly 错误。这是附加的最小示例。

父组件

<template>
  <div>
    <oslo v-bind.sync="data" />
  </div>
</template>

<script>

import Oslo from '@/components/Oslo.vue'

export default {
  components: {
    Oslo,
  },
  name: 'OsloParent',
  data() {
    return {
      data: {
        data: {
          name: 'Oslo name',
          access: 'admin'
        }
      },
    }
  },
}
</script>

子组件

<template>
  <div>
    <input type="text" v-model="name" @keyup="$emit('update:name', name)" />
    <input type="text" v-model="access" @keyup="$emit('update:access', access)" />
  </div>
</template>

<script>
export default {
  props: {
    name: String,
    access: String
  },
  name: 'Oslo',
}
</script>

这只是我为重现问题而创建的示例组件。实际的组件应该通过双向绑定处理这么多道具，这就是我使用 v-bind 指令和 sync 修饰符绑定数据的原因。这是来自控制台的 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: "name"

有什么建议可以改进这一点或让 Vue 针对这种特定情况发出警告？上面给出的组件可以正常工作，但是 Vue 会抛出错误。

Answer 1

尝试如下：

Vue.component('Oslo', {
  template: `
    <div>
    <input type="text" v-model="namec" @keyup="$emit('updated', {dat:namec, id: 'name'})" />
    <input type="text" v-model="accessc" @keyup="$emit('updated', {dat:accessc, id: ''})" />
  </div>
  `,
  props: {
    name: String,
    access: String
  },
  data() {
    return {
      namec: this.name,
      accessc: this.access
    }
  }
})

new Vue({
  el: '#demo',
      data() {
        return {
          name: 'Oslo name',
          access: 'admin'
        }
      },
  methods: {
    updated(data){
      data.id === 'name' ? this.name= data.dat : this.access= data.dat
      
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div>
  {{name}} {{access}}
    <oslo @updated="updated" />
    
  </div>
</div>

Answer 2

如果您有许多属性要从子组件监听，您可以只传递一个对象并同步它而不是单个属性。请看下面的例子：

Vue.config.productionTip = false
Vue.config.devtools = false

Vue.component('Oslo', {
  template: `
    <div>
    <input type="text" v-model="comp_name" @keyup="$emit('update:name', comp_name)" />
    <input type="text" v-model="comp_access" @keyup="$emit('update:access', comp_access)" />
  </div>
  `,
  props: {
    data: {
      name: String,
      access: String,
    }
  },
  data() {
    return {
      comp_name: this.data.name,
      comp_access: this.data.access
    }
  }
})

new Vue({
  el: '#app',
  data() {
    return {
      doc: {
        name: 'Oslo name',
        access: 'admin'
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    <span>---- {{ this.doc.name }}----</span>
    <span>---- {{ this.doc.access }}----</span>
    <oslo :data="this.doc" v-bind.sync="doc" />

  </div>
</div>

Answer 3

我在您的示例中发现了两个问题，可能会导致这个问题。

1. 直接使用v-model属性。改用v-bind 让它只显示。并使用v-on:change 处理程序触发$emit('update:propertyname', value) 并发送新值以更新对象。

2. $emit 中发送的值似乎是空的，因此没有任何变化。请改用$event.target.value。

旁注：v-on:keyup 可能不是最好听的事件，因为输入也可以拖放。在这种情况下，听v-on:change 会更好。

仅使用v-bind.sync 而不是v-bind:propertyName.sync 时的事件监听器注意事项：

如果要在父组件上监听子组件的update:propertyName 事件，则必须使用.capture 修饰符。否则update 事件会被子组件上的v-on:update:propertyName 捕获，这不会冒泡到父组件。

例如，您可以在<oslo> 标签上使用v-on:update:name.capture="someMethod"。并在父母的methods 中有这个someMethod。调用此方法后，将在子组件上触发事件，该事件将更新对象，从而更新属性。

大家一起：

let Oslo = {
  props: {
    name: String,
    access: String
  },
  name: 'Oslo',
  template: `<div>
    <input type="text" :value="name" @change="$emit('update:name', $event.target.value)" />
    <input type="text" :value="access" @change="$emit('update:access', $event.target.value)" />
  </div>`
}

new Vue({
  el: "#app",
  components: {
    Oslo,
  },
  data: {
    thedata: {
      name: 'Oslo name',
      access: 'admin'
    }
  },
  methods: {
    nameWillBeUpdated: function(v) {
      console.log('New value of name will be:', v);
      // After this, the `update:name` event handler of the
      // child component is triggered and the value will change.
    },
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<span>{{this.thedata.name}} - {{this.thedata.access}}</span>
<oslo
    v-bind.sync="thedata"
    v-on:update:name.capture="nameWillBeUpdated"
/>
</div>