javascript - Vuejs 模态。避免改变 Prop ，nuxt.js iview

Question

我需要有关模态的帮助，昨天我试图解决这个问题，但后来情况变得更糟。所以请任何帮助将不胜感激。我有一个父组件，里面有一个模态(子组件)

在我的父代码中:

    <template>
<div class="all">
  <Button type="primary" @click="modalUp()">Press me</Button>
  <appTest @changed = "modal1 = $event" :modal1='modal1'> </appTest>
  {{modal1}}

</div>
</template>
<script>
/* eslint-disable */
import test from '~components/test.vue'


export default {

  data(){
    return{
     modal1: false
    }
  },
  components: {
    appTest: test
  },
  methods: {
    modalUp() {
      this.modal1 = true
    }
  },
  watch:{
    modal1: function(){
      this.$on('changed', (data)=>{

        console.log(data)
      })

    }
  }

}

</script>
<style lang="css" scoped>


</style>

在子组件(appTest)里面我有这个

 <template>
 <div id="" >
   <Modal v-model="modal1" title="MODALLLL" @on-ok="ok" @on-cancel="cancel">
     <p>@twitter</p>
     <p>@facebook</p>
     <p>Good</p>
     {{modal1}}
   </Modal>
 </div>
 </template>
 <script>
 /* eslint-disable */
 export default {
   props: ['modal1'],
   data() {
     return {
     }
   },
   methods: {
     ok() {
       this.$Message.info('all good');

     },
     cancel() {
       this.$Message.info('Cancel');
       this.$emit('changed')
     }
   },
   watch:{
     modal1: function(){
       this.$emit('changed', this.modal1)
     }
   }

 }
 </script>
 <style lang="css" scoped>
 </style>

所以这段代码以一种方式工作，模式正确显示，但一旦它消失，当我们返回父组件时，它会给我这个 vue 警告 AVOID MUTATING PROP

我检查了文档和所有内容，但 vuejs 文档给出了 2+2 之类的示例，这在这种情况下没有帮助。我在互联网上观看了视频等，但仍然不知道如何以正确的方式完成它。

让它发挥作用的最佳方法是什么？

我正在使用 iview 的模态

Answer 1

让您的 child 使用计算值。

export default {
  props: ['modal1'],
  computed:{
    showModal:{
      get(){return this.modal1},
      set(v){ this.$emit("changed", v)}
    }
  },
}

并将子模板更新为

<Modal v-model="showModal" ...></Modal>

这样做，无论何时更改父级中的 modal1，该值都将在 Modal 组件中更新，并且每当 Modal 组件更改值，它将被发送给父级。