vue2.0 子组件改变props值,并向父组件传值的方法
更新时间：2018年03月01日 15:30:40 作者：z_Biao
下面小编就为大家分享一篇vue2.0 子组件改变props值,并向父组件传值的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
为什么我们会有修改 prop 中数据的冲动呢？通常是这两种原因：
prop 作为初始值传入后，子组件想把它当作局部数据来用；
prop 作为初始值传入，由子组件处理成其它数据输出。
对这两种原因，正确的应对方式是：
定义一个局部变量，并用 prop 的值初始化它：
props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}
定义一个计算属性，处理 prop 的值并返回。
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop
是一个对象或数组，在子组件内部改变它会影响父组件的状态。
我们知道，父组件是使用 props 传递数据给子组件，但子组件怎么跟父组件通信呢？这个时候 Vue 的自定义事件系统就派得上用场了。 https://cn.vuejs.org/v2/guide/components.html#自定义事件
在父组件中定义两个变量，动态绑定到子组件中
子组件：
父组件：定义两个方法，并绑定到子组件自定义事件上
以上这篇vue2.0 子组件改变props值,并向父组件传值的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了在Vue.js中使用TypeScript的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-03-03
本篇文章主要介绍了vue中添加mp3音频文件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
本篇文章主要介绍了详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持，非常具有实用价值，需要的朋友可以参考下2017-10-10
这篇文章主要介绍了Vue-input框checkbox强制刷新问题，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
这篇文章主要介绍了Vue中使用create-keyframe-animation与动画钩子完成复杂动画，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
小编给大家通过本文详细介绍了关于vue.js项目的构建、打包、发布的全过程，文章很以后价值，值得你参考。2017-11-11
在vue项目中,很多场景要求我们动态改变元素的样式,下面这篇文章主要给大家介绍了关于Vue动态样式方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
这篇文章主要为大家介绍了Vue源码学习之数据初始化实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了基于vue的验证码组件的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
vue的人都知道,vue3里面使用了proxy替换了defineProperty,本文主要介绍了Vue3用Proxy替代defineProperty的原因,具有一定的参考价值,感兴趣的可以了解一下2023-12-12
最新评论