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值,并向父组件传值的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
uniapp-vue3-弹出选择组件wo-pop-selector使用示例
wo-pop-selector弹出选择组件采用uniapp-vue3实现, 支持H5、微信小程序,本文给大家介绍uniapp-vue3-弹出选择组件wo-pop-selector及使用示例,感兴趣的朋友一起看看吧2023-10-10
vue2 v-model/v-text 中使用过滤器的方法示例
这篇文章主要介绍了vue2 v-model/v-text 中使用过滤器的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
Vue的响应式实现是借助Object.defineProperty通过重写getter和setter方法来进行的数据劫持，Vue3通过Proxy代理拦截对象中任意属性的变化，通过Reflect反射对源对象的属性进行操作，然后再在get里收集依赖在set里派发更新2023-03-03
本文主要介绍了vue2+elementui进行hover提示的使用，主要分为外部和内部，具有一定的参考价值，感兴趣的可以了解一下2021-11-11
在vsCode中书写Vue页面时无法提示,那真是很郁闷的事情,下面这篇文章主要给大家介绍了关于vsCode中vue文件无法提示html标签的操作方法,需要的朋友可以参考下2023-03-03
Vue3是一款流行的前端框架,它支持多种传值方式,包括兄弟组件之间的传值,本文主要介绍了vue3+ts 兄弟组件之间传值的实现,具有一定的参考价值,感兴趣的可以了解一下2023-11-11
husky是一个git hooks工具（git的钩子工具，可以在特定时机执行特定的命令），这篇文章主要介绍了Vue3-基于husky的代码检查工作流,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了vue mixins组件复用的几种方式（小结）,vue中提供了一种混合机制mixins，用来更高效的实现组件内容的复用,有兴趣的可以了解一下2017-09-09
这篇文章主要为大家详细介绍了vue插件tab选项卡的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要介绍了Vue全局变量局部变量，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
最新评论