Vue Cli 3-typescript如何将@Prop（）与双向绑定一起使用？

我的源代码是：

子组件：

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

{{text}}
关
导出默认类AliUMSSnackbar扩展Vue{
@Prop（）私有showSnackbar！：布尔值；
}

父组件：

<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 warn]：避免直接修改道具，因为每当父组件重新渲染时，该值将被覆盖。相反，使用基于道具值的数据或计算属性。正在变异的道具：“showSnackbar”

如果您使用的是Vue

2.3.0+

，则可以使用对道具进行“双向绑定”

这可以通过以

update:myPropName

的模式发出事件来实现

因此，在您的子组件中，通过单击按钮更新道具

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

关闭

并将父组件修改为下面的组件，以便它可以侦听发出的事件并更新本地数据属性，即

showSnackbar