Question

我的Vue组件有两个道具a和b（对于v-model是a）。在组件中，当a和b都更改时，我需要做一些逻辑，实际上a和b总是会一起更改。但是我不想将它们组合为一个对象。如果使用watch，则必须处理相应的更改。当两个变量都改变时，我如何获得机会？

Answer 1

您可以在计算中使用b

我假设a是firstName和lastName，而b是fullName。

您可以执行以下操作

<template>
  <div>
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <span>{{ fullName }}</span>
  </div>
</template>

<script>
export default {
    data () {
        return {
            firstName: '',
            lastName: '',
        }
    },
    computed: {
        fullName () {
            return this.firstName + ' ' + this.lastName
        },
    },
}
</script>

Answer 2

export default {
  props: ['a', 'b'],
  computed: {
    abHandler () { return {a: this.a, b: this.b } }
  },
  watch: {
    abHandler () {
      console.log('a or b has changed')
    }
  }
}

Vue组件道具同步

2 个答案: