VueJS2：避免直接更改道具，因为每当父组件重新渲染时，该值就会被覆盖

Question

我正在使用Vuejs2和TailwindCss创建非常简单的Button。但是，当我尝试单击In Parent Component时，遇到如下错误。

避免直接更改prop，因为每当父组件重新渲染时，该值就会被覆盖。

// 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, } },

sudo apt-get install cmake git libgtk2.0-dev pkg-config libavcodec-dev libavformat-dev libswscale-dev

预先感谢...

Answer 1

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

例如，您的子组件具有

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

您的父母

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