2

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

在我的父母中，代码：

    <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 的模态

4

1 回答 1

1

更改您的孩子以使用计算值。

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

并将子模板更新为

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

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

于 2017-07-16T18:59:56.377 回答