避免直接更改prop，因为每当父组件重新渲染时，该值都会被覆盖。快餐栏超时错误

Question

我将快餐栏用作全局组件以在每个组件上使用。

这是我的Login.vue（我在登录页面上使用了小吃店）：

<snackbar 
    :snackbar="snackbar_data.snackbar" 
    :color="snackbar_data.color" 
    :text="snackbar_data.text"></snackbar>

data: () => ({
    snackbar_data: {
        snackbar: false,
        color: 'success',
        is_list: false,
        text: ''
    }
})

我的snackbar.vue是：

<template>
     <v-snackbar
     v-model="snackbar"
     :timeout="timeout"
     :color="color"
     :right="true"
     :top="true"
     :multi-line="true"
     v-on:requestClose="close">

          <h3>{{ text }}</h3>

          <v-btn class="mx-2" text color="transparent" @click="$emit('requestClose')">
              <v-icon color="white">mdi-close</v-icon>
          </v-btn>
     </v-snackbar>
 </template>
 <script>
 export default {
     props: ['snackbar', 'color', 'text'],

     data() {
         return {   
             timeout: 3000
         }
     },

     methods: {
         close() {
            this.snackbar = false;
         }
     }
 }
 </script>

我的问题是快餐栏在出现以下错误时自动关闭：

避免直接更改prop，因为每当父组件重新渲染时，该值就会被覆盖。而是使用基于属性值的数据或计算属性。道具被突变：“小吃店”

位于

--->位于src / views / core / snackbar.vue 在src / views / user / Login.vue

我提到了stackoverflow答案Vue closing component returns avoid mutating a prop directly

仍然收到错误消息。