Vue中子组件向父组件传值$emit、.sync的案例详解

目录

• 父组件
• 子组件
• 案例
• 父组件
• 子组件
• v-model

首先我们可先了解一个父组件向子组件传值的一个案例：将父组件请求的后端数据传值给子组件props

因为通过属性传值是单向的,有时候我们需要子组件的data 数据需要交给父组件使用:通过在子组件上定义自定义事件，在子组件中通过$emit 来触发事件；子组件的事件被触发并传参，事件处理函数可以接收到子组件的数据；事件绑定的事件处理函数在父节点上，故可在事件处理函数中用到子组件的数据值来修改父节点的数据。

案例：

父组件

子组件触发事件 并传值 :

 this.$emit("自定义事件,可以和原生事件同名:click",参数1,参数2,)  

 

子组件

首先已知该案例后端请求的数据为一个数组

效果图：

 此时我们随意点击一个+按钮，如点击第二个

 根据父组件总价也随着子组件的值改变而改变，说明传值成功。

系统自带的直接可以使用，不需要自定义事件，直接传值过来

子:如 this.$emit("update:msg",100)    父:.sync="n" />

案例

父组件

子组件

效果图

此时点击-按钮，会发现和+按钮实现的效果一样

 如点击第一个-按钮

 依然能将子组件的值传给父组件

v-model

v-model同样也可以传值实现双向数据绑定，子组件由props接收value即可

到此这篇关于Vue中子组件向父组件传值$emit、.sync的文章就介绍到这了,更多相关Vue子组件向父组件传值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！