VueJS2:避免直接改变 prop，因为每当父组件重新渲染时，该值都会被覆盖

Question

我正在使用Vuejs2和TailwindCss创建非常简单的Popup Modal。但是，当我想要单击Button时，我遇到了如下错误。

避免直接改变道具，因为每当父组件重新渲染时，该值都会被覆盖。

In Parent Component

// CardModal
<template>
<div class="bg-white">
<div v-if="showing">
Modal
</div>
</div>
</template>
<script>
export default {
data() {
return {
showing: false,
}
}
}
</script> 

Child Components

<button  @click="showing = true" class="px-4 my-4 mx-3 bg-blue-400 py-1 font-bold rounded text-white">
Add Product
</button>
<!-- Modal -->
<cardModal :showing="showing" />
// Script
props: {
showing: {
// required: true,
type: Boolean,
}
},    

提前感谢...

Answer 1

很难理解你的代码，但你不能直接更改子组件中 prop 的值，而是你可以向父组件发出一个事件，为你改变 prop 的值。

例如，您的子组件具有

<template>
@click="$emit('show',true)"
</template>
//
props: {
showing: {
// required: true,
type: Boolean,
}
}

你的父母

<cardModal :showing="showing" @show="showing=$event" />