VUE父子组件传递数据
栏目: JavaScript · 发布时间: 5年前
内容简介:父组件 food 通过 props 把 值为 0 的 type 字段传给子组件,子组件在初始化时可以拿到 type 字段,渲染出字符“0 水果”要保证异步传递数据,根据VUE的双向绑定原理,不难得知,异步传递的数据需要watch。若props传递的数据关联到模板中,则组件初始化时会watch该数据。可见下面代码中的type和info。
1. 同步传递数据
父组件 food 通过 props 把 值为 0 的 type 字段传给子组件,子组件在初始化时可以拿到 type 字段,渲染出字符“0 水果”
// 父组件 food.vue <template> <apple :type="type"></apple> </template> <script> data (){ return { type: 0 }; } </script> // 子组件 apple.vue <template> <span>{{childType}}</span> </template> <script> props: ['type'], created () { this.childType = this.formatterType(type); }, method () { formatterType (type) { if (type === 0) { return "0 水果"; } if (type === 1) { return "1 蔬菜"; } return ''; } } </script>
2 异步传递数据
要保证异步传递数据,根据VUE的双向绑定原理,不难得知,异步传递的数据需要watch。
2.1 props
若props传递的数据关联到模板中,则组件初始化时会watch该数据。可见下面代码中的type和info。
若props传递的数据不关联到模板,则为props传递的数据添加watch,在watch方法中修改关联模板的对象。可见下面代码中的child_type。此方法中,watch监听到的是是发生变化的props,故需要对目标对象做初始化处理。
// 父组件 food.vue <template> <apple :type="type" :info="info"></apple> </template> <script> data (){ return { type: 0, info: {comment: 'ugly food'} }; } created () { setTimeout (()=>{ this.type = 1; this.info = {comment: 'tasty food'}; },1000); } </script> // 子组件 apple.vue <template> <div class="memuManage"> <span>type: {{child_type}}</span> <span>type: {{type|formatterType}}</span> <span>info: {{info.comment}}</span> </div> </template> <script> export default { data () { return { child_type: '' }; }, props: ["type","info"], watch: { type (newVal) { this.child_type = this.formatterType(newVal); } }, created () { this.child_type = this.formatterType(this.type); }, filters: { formatterType: function (type) { if (type === 0) { return "0 水果"; } if (type === 1) { return "1 蔬菜"; } return ''; } }, methods: { formatterType (type) { if (type === 0) { return "0 水果"; } if (type === 1) { return "1 蔬菜"; } return ''; } } }; </script>
2.2 vuex
数据存放在store中,父组件调用vuex中的方法改变数据。
若store的数据关联子组件的模板,则子组件初始化时会watch该数据。
若store的数据不关联子组件的模板,则为store的数据添加watch,在watch方法中修改关联模板的对象。需要对关联模板的对象初始化。
3. 同步或异步传递数据
若父组件向子组件可能同步或异步传递数据,则首先子组件需要在created或者computed中对目标对象初始化,并且子组件中需要watch由props传递的数据,并修改目标对象。
以上所述就是小编给大家介绍的《VUE父子组件传递数据》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- React系列六 - 父子组件通信
- 从 TodoList 中学父子组件通信
- Vue 中父子组件数据传递
- 我学react之父子组件通信
- Vue 中非父子组件间的传值
- Vue使用props父子组件传递数据
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
京东平台运营攻略(全彩)
京东商学院 / 电子工业出版社 / 2015-5 / 69.00元
2014 年年末,京东POP 开放平台的入驻商家已超过6 万,京东平台被广泛关注和认可的同时,在电商江湖中仍颇具神秘色彩。面对碎片化的信息,京东的店铺经营者及希望入驻京东的准商家们,对于在京东如何利用丰富的各类平台资源,搭建并运营京东店铺,一直很难找到全面而系统的资料。 《京东平台运营攻略(全彩)》由京东官方出品,动员了京东内部涉及第三方店铺业务线的众多部门,由多位业务精英参与撰写,保证了内......一起来看看 《京东平台运营攻略(全彩)》 这本书的介绍吧!