vue 自定义组件实现响应式控件的方法

一、自定义组件和父组件之间的响应式控件

1、通过v-model 绑定父组件的一个变量
<auinput title="真实姓名" v-model="postData.relname" ph="请输入您的真实姓名"></auinput>
<auinput title="联系电话" v-model="postData.tel" ph="该号码为以后平台的登录账号"></auinput>

2、子组件的props申明一个value变量
        props: {
            value: {
                type: String,
                default: 'value'
            }
        }

3、子组件的input控件用v-bind方法将value属性绑定为props的value变量，再通过v-on监控input控件的input事件，触发时更新input控件的value值（也同步更新了props的value变量值）
<input v-if="type=='default'" class="input is-small" 
v-bind:value="value" 
v-on:input="$emit('input', $event.target.value)"
:placeholder="ph"/>

二、子组件的props变量和父组件的变量双向绑定方法

1、通过v-bind:要绑定的子组件的props变量.sync=父组件的变量  绑定父组件的一个变量
<aulocation title="所属区域" v-bind:value.sync="postData.locationid" ph="点击左侧按钮选择所属区域"></aulocation>

2、子组件的props申明一个value变量
        props: {
            value: {
                type: String,
                default: 'value'
            }
        }

3、通过emit调用update，将value值更新为新值。
this.$emit('update:value', JSON.stringify(e[0]))