javascript - 使用vue2.0,props双向改变数据。
大家讲道理
大家讲道理 2017-04-11 11:30:05
[JavaScript讨论组]

使用了element ui。看文档可以用$on与$emit模拟双向绑定。但是似乎失败了。。两天了没解决,心好累。。

  1. 组件代码

   
        
            
            
        
    

methods: {
    testChange(val){
                this.$emit('testChange',val);
            }
}
   

2.父级代码


 

import vueAddress from 'src/components/address'

components: {
        vueAddress
      },
data: function() {
        return {
            provinceValue:'全国',
            cityValue:''
        }
      },
methods: {
    testChange2(val){
            this.provinceValue=val;
       }
   }

最后在父级点击组件依旧是

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "provinceValue" 
大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

全部回复(2)
天蓬老师

组件代码:
应该这样写

methods: {
    testChange(val){
        this.$emit('testchange',val);
        // 或者
        // this.$emit('test-change',val);
    }
}

父组件:

<vue-address :provinceValue=provinceValue
             :cityValue=cityValue
              @testchange="testChange2">
              // @test-change="testChange2">
</vue-address> 

原因:vue中$emit的写法并不支持驼峰,只能是全部小写,或者在分隔的地方用-

伊谢尔伦

在子组件的方法中,写上$emit('你的子组件内方法'),父组件调用子组件用v-on:子组件方法名字="调用父组件方法"

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号