Question

我的源代码是：

子组件：

<template>
  <v-snackbar
    v-model="showSnackbar"
    :bottom="y === 'bottom'"
    :left="x === 'left'"
    :multi-line="mode === 'multi-line'"
    :right="x === 'right'"
    :timeout="timeout"
    :top="y === 'top'"
    :vertical="mode === 'vertical'"
  >
    {{ text }}
    <v-btn
      color="pink"
      flat
      @click="showSnackbar = false"
    >
      Close
    </v-btn>
  </v-snackbar>
</template>

export default class AliUMSSnackbar extends Vue {
  @Prop() private showSnackbar!: Boolean;
}

父组件：

<ali-snackbar v-bind:showSnackbar="showSnackbar"></ali-snackbar>

但是在单击“关闭”按钮时，出现此错误“ [Vue警告]：避免直接更改道具，因为每当父组件重新渲染时，该值就会被覆盖。而是使用基于属性值的数据或计算属性。道具被突变：“ showSnackbar”'

Answer 1

如果您使用的是Vue 2.3.0+，则可以使用.sync modifier为道具设置“双向绑定”。

这可以通过以update:myPropName模式发出事件来完成。

因此，在您的子组件中，通过执行此操作来更新按钮点击时的属性。

<v-btn color="pink" flat @click="() => this.$emit('update:showSnackbar', false)">Close</v-btn>

然后将您的父组件修改为以下组件，以便它可以监听发出的事件并更新showSnackbar的本地数据属性。

<ali-snackbar v-bind:showSnackbar.sync="showSnackbar"></ali-snackbar>

Vue Cli 3 -typescript如何通过两种方式使用@Prop（）？

1 个答案: