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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值