vue2.0 子组件改变props值,并向父组件传值
2017-08-10 10:06
393 查看
vue2.0 子组件改变props值,并向父组件传值
为什么我们会有修改 prop 中数据的冲动呢?通常是这两种原因:
prop 作为初始值传入后,子组件想把它当作局部数据来用;
prop 作为初始值传入,由子组件处理成其它数据输出。
对这两种原因,正确的应对方式是:
定义一个局部变量,并用 prop 的值初始化它:
定义一个计算属性,处理 prop 的值并返回。
注意在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop
是一个对象或数组,在子组件内部改变它会影响父组件的状态。
我们知道,父组件是使用 props 传递数据给子组件,但子组件怎么跟父组件通信呢?这个时候 Vue 的自定义事件系统就派得上用场了。 https://cn.vuejs.org/v2/guide/components.html#自定义事件
在父组件中定义两个变量,动态绑定到子组件中
子组件:
父组件:定义两个方法,并绑定到子组件自定义事件上
4000
为什么我们会有修改 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#自定义事件
在父组件中定义两个变量,动态绑定到子组件中
子组件:
父组件:定义两个方法,并绑定到子组件自定义事件上
4000
相关文章推荐
- vue2.0 子组件改变props值,并向父组件传值的方法
- vue2.0 改变子组件从父组件传递过来的值报错Avoid mutating a prop directly since the value will be overwritten whenever
- Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
- vue2.0中的组件通信2——子组件向父组件传递数据
- Vue2.0 心法 ==> 第二层:组件通信
- vue2.0_饿了么——购物车组件
- vue-router2.0组件复用
- Vuejs——(9)组件——props数据传递
- VUE2.0+Element-UI+Echarts封装的组件
- vue2.0之间组件的传值
- Vue.js-----轻量高效的MVVM框架(九、组件利用Props传递数据)
- vue1.0和2.0定义和注册组件的写法
- 浅谈vue的props,data,computed变化对组件更新的影响
- vue2.0组件之间的通信
- vue2.0父子组件以及非父子组件如何通信
- vue2.0 根据状态值进行样式的改变展示方法
- vue-router2.0 组件之间传参及获取动态参数的方法
- vue.2.0-自定义全局组件
- Vue 2.0学习笔记:Vue组件内容分发(slot)
- vue2.0_饿了么——购物车组件_图片