javascript - 避免vueJS中的props突变

我有一个带有道具ans的组件，我想将值从false修改为true，但我有一个消息表单chrome控制台

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders

在父组件中，我有一个函数（myFunction），它接受一个参数（值）。

我需要保持这样的论点，但是我还需要从子组件中检索emit的值，以更改myData的值，而不会更改child中的props。

https://codesandbox.io/s/distracted-wiles-w8vwf

<template>
  <div>
    <p>The number is {{number}}</p>
    <Child :MyProp="myData" @on-click-btn="myfonction(5)"/>
  </div>

</template>

<script>
import Child from "./components/Child.vue";

export default {
  data() {
    return {
      myData: 'button',
      number: 1
    };
  },
  components: {
    Child
  },
  methods: {
    myfonction(value) {
      this.number = value;
    }
  }
};
</script>

谢谢

最佳答案

您可以使用sync修饰符：

Vue.component('child', {
  template: '#child',
  props: {
    val: {
      type: String, required: true
    }
  },
  methods: {
    handleInput(event) {
      this.$emit('update:val', event.target.value)
    }
  }
})

new Vue({
  el: '#app',
  data(){
    return {
      value: ''
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>

<script type="text/x-template" id="child">
  <input @input="handleInput">
</script>

<div id="app">
  <child :val.sync="value"></child>
  <div>{{ value }}</div>
</div>

关于javascript - 避免vueJS中的props突变，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60777227/