Vue Cli 3 -typescript 如何使用@Prop() 进行双向绑定？

Posted 2023-02-23

【中文标题】Vue Cli 3 -typescript 如何使用@Prop() 进行双向绑定？

【英文标题】：Vue Cli 3 -typescript how to use @Prop() with two way binding?

【发布时间】：2019-06-10 05:34:28

【问题描述】：

我的源代码是：

子组件：

<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]: Avoid mutating a prop directly because the value will be overwritten when the parent component re-renders.相反，使用基于道具值的数据或计算属性。正在变异的道具：“showSnackbar”'

【参考方案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>