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

您不能直接变异道具，而是可以从中发出事件子组件并更改作为道具传递的data属性根据要求的子组件。

要了解更多信息，请访问：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>

Parent.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>

所以我建议的是通过将其连接到prop来创建一个新变量，然后执行以下操作：

<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>

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

2 个答案: