我需要帮助模态，我试图让这个问题在昨天排序，但后来变得更糟 . 所以请任何帮助将不胜感激 . 我有一个父组件，里面有一个模态（子组件）
在我父母的代码中：
<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的modal
1 回答
将您的孩子改为使用计算值 .
并将子模板更新为
这样做，当您在父级中更改
modal1时，该值将在Modal组件中更新，并且只要Modal组件更改该值，它将被发送到父级 .