vue父子组件双向绑定,修改父组件值。

  • 1、父子组件传值

v-mode只能进行单个双向绑定值而使用.sync可支持多个双向绑定值
父组件:
在这里插入图片描述
子组件
在这里插入图片描述
在这里插入图片描述
update为固定字段,通过冒号连接双向绑定的msg,将time传递给父组件的v-model绑定的变量。
// 注意time的类型要与父组件中定义的类型一样,不然会报错。

Vue中,父子组件之间的双向绑定可以通过props和事件来实现。在组件中,可以通过v-bind将属性绑定到子组件上,并通过事件监听子组件的变化。而在子组件中,可以通过this.$emit触发事件并将传递给组件。 具体步骤如下: 1. 在组件中,通过props将属性绑定到子组件上。例如,使用v-bind指令将isShow属性绑定到子组件上:【Adv】: 子组件标签 【:isShow】:组件绑定的属性 【isShow1】:组件想向子组件传递的。 2. 在子组件中,通过props接收从组件传递过来的属性。可以在子组件的props选项中声明接收的属性,然后在子组件中就可以使用this.propsName获取组件传递的。例如:子组件props接收isShow属性:【isShow】:就是组件绑定的属性。它在子组件用props接收后,用this.isShow就可获取使用。 3. 如果子组件有需要向组件传递的,可以通过this.$emit触发一个自定义事件,并将作为参数传递给组件。在组件中,可以通过v-on指令监听子组件触发的事件,然后在事件处理函数中获取子组件传递的。例如:子组件通过this.$emit触发事件,组件使用v-on接收事件:【:isShow】:组件绑定的属性 【isShow1】:组件想向子组件传递的。 【子组件,this.$emit】:1.子组件,this.$emit。 总结:通过在组件和子组件之间使用props和事件的方式,可以实现Vue中的父子组件双向绑定组件通过props将属性传递给子组件,子组件通过this.$emit触发事件将传递给组件。这样就实现了父子组件之间的双向数据流。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值