资讯专栏INFORMATION COLUMN

vue2.0子组件修改父组件数据

keithxiaoy / 603人阅读

摘要:从升级至之后的被去除因此直接在子组件修改父组件的值是会报错的目的是为了阻止子组件影响父组件的数据那么在之后如何在子组件修改父组件传过来的值呢思路是通过子组件发射一个方法在父组件使用子组件的地方用绑定这个自定义事件然后在父组件定义这个

从vue1.0升级至2.0之后 prop的.sync被去除 因此直接在子组件修改父组件的值是会报错的 目的是为了阻止子组件影响父组件的数据
那么在vue2.0之后 如何在子组件修改父组件props传过来的值呢?
思路是通过子组件$emit发射一个方法

$emit("increment",val);

在父组件使用子组件的地方用v-on绑定这个自定义事件

然后在父组件定义这个方法

methods:{
  incrementTotal(val) {
      this.val = val;
    } 
}

虽然这种方式可以修改父组件数据,但是官方是不推荐在组件内修改通过props传入的父组件数据,而是推荐使用vuex

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/50353.html

相关文章

  • vue2.0组件修改组件数据

    摘要:从升级至之后的被去除因此直接在子组件修改父组件的值是会报错的目的是为了阻止子组件影响父组件的数据那么在之后如何在子组件修改父组件传过来的值呢思路是通过子组件发射一个方法在父组件使用子组件的地方用绑定这个自定义事件然后在父组件定义这个 从vue1.0升级至2.0之后 prop的.sync被去除 因此直接在子组件修改父组件的值是会报错的 目的是为了阻止子组件影响父组件的数据那么在vue2...

    zhonghanwen 评论0 收藏0
  • vue2.0组件修改组件数据

    摘要:从升级至之后的被去除因此直接在子组件修改父组件的值是会报错的目的是为了阻止子组件影响父组件的数据那么在之后如何在子组件修改父组件传过来的值呢思路是通过子组件发射一个方法在父组件使用子组件的地方用绑定这个自定义事件然后在父组件定义这个 从vue1.0升级至2.0之后 prop的.sync被去除 因此直接在子组件修改父组件的值是会报错的 目的是为了阻止子组件影响父组件的数据那么在vue2...

    iamyoung001 评论0 收藏0
  • vue2实践(持续更新)

    摘要:记录一些小技巧和踩过的坑由于本篇文章内容太多,导致编辑器有点卡,所以新开辟了一篇实践二,后续再这里更新。组件的生命周期函数是在标签里的数据发生变化时候触发数据可能更新了,但是没有绑定到上面的话,不会调用钩子函数。 记录一些小技巧和踩过的坑 由于本篇文章内容太多,导致SF编辑器有点卡,所以新开辟了一篇 vue2实践(二),后续再这里更新。 1. props 带不带冒号的区别 ...

    n7then 评论0 收藏0
  • vue2.0开发聊天程序(三)组件的通信

    摘要:我在中写了这段代码在组件被创建时候将会执行此函数相当于进入页面的自执行使用方法监听属性并执行一个回调函数按道理在元素被创建的时候,会将监听到的值赋给并且打印。 天地不仁以万物为刍狗,宇宙无义视众生如蝼蚁                  ——萧鼎和我 上一节列出了5个关键点,第一个路由已经解决了,接下来解决第二个问题: 组件的通信问题 一、组件的关系 组件之间的关系无非就是两种父子关系...

    ddongjian0000 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<