Question

大家好，我试图创建一个VueJS自定义组件来包装Vue Autonumeric组件。

https://github.com/autoNumeric/vue-autoNumeric

在Vue自动数字页面中，特别提到了警告

注意事项请注意，直接在上设置：value = '42' 组件会破坏它（真的！）。请勿这样做：

因此，在我的自定义组件MoneyComponent.vue中，我创建了一个v模型

这是完整的代码

<template>
    <div>
        <vue-autonumeric
                v-model="amount"
        ></vue-autonumeric>
    </div>
</template>

<script>
    import VueAutonumeric from 'vue-autonumeric/src/components/VueAutonumeric.vue';

    export default {
        components: {
            VueAutonumeric,
        },
        props: {
            value: {},
        },
        data() {
            return {
                amount: this.value,
            }
        },
        methods: {


        },
        watch: {

            amount (value) {
                this.$emit('input', value);
            }

        },
    }
</script>

用法示例

<template>
    <v-money
        v-model="price"
    ></v-money>
</template>
<script>
    export default {
        data() {
            return {
                price: 45,
            }
        },
        methods: {


        }
    }
<script>

这适用于父级的初始值。但是，例如，如果我将price属性更改为55，则MoneyComponent中的amount属性不会更改。

这里的问题是数量属性在第二次更改时不起作用吗？我该如何解决？

谢谢

Answer 1

由于您使用的是v-model，因此需要发出input事件以使父级中的数据发生更改

    watch: {
      amount: function (newVal) {
        this.$emit('input', newVal)
      },
      value: function (newVal, oldVal) {
        if (newVal !== oldVal) {
          this.amount = newVal
        }
      }
    }

然后是您的组件

<template>
    <div>
        <vue-autonumeric
          v-model="amount"
        ></vue-autonumeric>
    </div>
</template>

<script>
    import VueAutonumeric from 'vue-autonumeric/src/components/VueAutonumeric.vue';
    export default {
        components: {
            VueAutonumeric,
        },
        props: {
            value: {},
        },
        data() {
            return {
                amount: this.value,
            }
        },
        watch: {
          amount: function (newVal) {
            this.$emit('input', newVal)
          },
          value: function (newVal, oldVal) {
            if (newVal !== oldVal) {
              this.amount = newVal
            }
          }
        }
    }
</script>

VueJS从props设置自定义组件默认值

1 个答案: