Vue Cli 3 -typescript 如何使用@Prop() 和两种方式绑定？

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 warn]：避免直接修改 prop，因为只要父组件重新渲染，该值就会被覆盖。相反，使用数据或根据道具的价值计算属性。正在改变的道具："showSnackbar"'

Answer 1

如果您使用的是 Vue 2.3.0+，您可以使用 .sync modifier 为道具提供 "two-way binding"。

这可以通过以 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() 和两种方式绑定？

Vue Cli 3 -typescript how to use @Prop() with two way binding?

prop

typescript

vue.js

two-way-binding