父子组件数据双向绑定

究其原因prop是单向传递的

---

• 第一次尝试（通过input事件与v-model的特殊关系） 子组件代码如下：

<template>
    <van-field class="our-field-normal"
               :value="this.va"
               :label="this.label"
               :placeholder="this.place"
               @input="handleChange"></van-field>
</template>

<script lang="ts">
    import {Component, Prop, Vue} from "vue-property-decorator";


    @Component
    export default class OurFieldNormal extends Vue {
        //name: "our_field_normal"

        @Prop()
        private va!: string;
        @Prop()
        private label!: string;
        @Prop()
        private place!: string;

        private handleChange(event: any) {
            this.$emit('input', event);//关键所在，input事件会修改父组件value的值
        }
    }
</script>

父组件代码如下：

  <our-field-normal v-model="product.parameter" label="参数" place="请填写钻石参数"/>

结果：一次有效，数据返回后会被清空，pass

---

• 第二次尝试（真正意义上的双向绑定） 子组件代码如下

<template>
    <van-field class="our-field-normal"
               :value="this.value"
               :label="this.label"
               :placeholder="this.place"
               @input="handleChange"
    />
</template>

<script>
    // import {Component, Prop, Vue} from "vue-property-decorator";


    export default {
        name: "our_field_normal",

        props: ['value', 'label', 'place'],
        model: {
            prop: 'value',
            event: 'change'
        },
        methods: {
            handleChange(event) {
                this.$emit('change', event);
            }
        }
    }
</script>