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

最新推荐文章于 2025-10-02 06:08:35 发布

原创最新推荐文章于 2025-10-02 06:08:35 发布 · 810 阅读

0 ·

CC 4.0 BY-SA版权

Vue.js 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Vue中实现自定义组件与父组件间的响应式数据交互。通过v-model和props进行双向绑定，子组件可以监听input事件更新父组件的数据，同时使用.sync修饰符实现props变量与父组件变量的双向绑定。示例代码详细展示了v-model、v-bind、v-on:input和$emit的用法。

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

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]))