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警告避免MUTATING PROP

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

让它运作的最佳方式是什么？

我正在使用iview的模态

Answer 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组件更改该值时，它都会被发送到父母。

Vuejs莫代尔。避免更换道具，nuxt.js iview

1 个答案: