避免直接改变 prop，因为只要父组件重新渲染，该值就会被覆盖。反而

Question

如何解决 避免直接修改 prop，因为每当父组件重新渲染时，该值将被覆盖。相反，使用基于道具值的数据或计算属性。道具被变异：“显示”问题？

我的 SnackbarComponent.vue：

<template>
  <v-snackbar
    v-model="show"
    :top="pinY === 'top'"
    :right="pinX === 'right'"
    :bottom="pinY === 'bottom'"
    :left="pinX === 'left'"
    :color="variant"
    :timeout="timeout"
    :vertical="mode === 'vertical'"
    :multi-line="mode === 'multi-line'"
  >
    {{ message }}
    <v-btn fab @click="show = false" color="transparent" depressed>
      close
    </v-btn>
  </v-snackbar>
</template>
<script>
export default {
  props: {
    show: {
      type: Boolean,
      required: true,
      default: false
    },
  },
  data() {
    return {

    }
  }
}
</script>

Answer 1

你不能直接改变一个道具，而是可以从 子组件并将作为道具传递的数据属性更改为 根据要求的子组件。

阅读更多：https://vegibit.com/vuejs-parent-child-communication/

Child.vue

<template>
  <v-snackbar
    v-model="show"
    :top="pinY === 'top'"
    :right="pinX === 'right'"
    :bottom="pinY === 'bottom'"
    :left="pinX === 'left'"
    :color="variant"
    :timeout="timeout"
    :vertical="mode === 'vertical'"
    :multi-line="mode === 'multi-line'"
  >
    {{ message }}
    <v-btn fab @click="handleClose" color="transparent" depressed>
      close
    </v-btn>
  </v-snackbar>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      required: true,
      default: false
    },
  },
  data() {
    return {}
  },
  methods: {
   handleClose() {
    this.$emit('onClose')
   }
  }
}
</script>

父.vue

<template>
 <div>
  <Child 
   :show="show"
   @onClose="handleClose"
  />
 </div>
</template>

<script>
 import Child from './Child.vue'
 export default {
  data () {
   return {
    show: true
   }
  },
  components: {
   Child
  },
  methods: {
   handleClose () {
    this.show = false
   }
  }
 }
</script>

因此，这里子级在关闭按钮上发出一个事件，在 emit 上，父级中的处理程序 fn 被调用，其中父级中的数据属性 show 设置为 false。而且，由于 show 被作为 prop 传递给子组件，因此子组件将获取 prop show 的更新值并相应地更新组件。

Answer 2

这里的问题在下面一行。不应在子组件中更新属性：

<v-btn fab @click="show = false" color="transparent" depressed> 

所以我建议通过将它连接到道具来创建一个新变量，然后执行我们需要的操作，如下所示：

<template>
    <v-snackbar v-model="showModal"
                :top="pinY === 'top'"
                :right="pinX === 'right'"
                :bottom="pinY === 'bottom'"
                :left="pinX === 'left'"
                :color="variant"
                :timeout="timeout"
                :vertical="mode === 'vertical'"
                :multi-line="mode === 'multi-line'">
        {{ message }}
        <v-btn fab @click="hideModal" color="transparent" depressed>
            close
        </v-btn>
    </v-snackbar>
</template>
<script>
    export default {
        props: {
            show: {
                type: Boolean,
                required: true,
                default: false
            },
        },
        data() {
            return {
                showModal: this.show /*The local variable added and referred in v-snackbar */
            }
        },
        methods: {
            /*New method to hide the snackbar, you could still be using inline 
              coding and replace the prop by the new variable*/
            hideModal() {
                this.showModal = false;
            }
        }
    }
</script>