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父子组件传递数据
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
精通 CSS(第3版)
[英]安迪•巴德 - Andy Budd、[瑞典]埃米尔•比约克隆德 - Emil Björklund / 李松峰 / 人民邮电出版社 / 2019-2 / 99
本书是CSS设计经典图书升级版,结合CSS近年来的发展,尤其是CSS3和HTML5的特性,对内容进行了全面改写。本书介绍了涉及字体、网页布局、响应式Web设计、表单、动画等方面的实用技巧,并讨论了如何实现稳健、灵活、无障碍访问的Web设计,以及在技术层面如何实现跨浏览器方案和后备方案。本书还介绍了一些鲜为人知的高级技巧,让你的Web设计脱颖而出。一起来看看 《精通 CSS(第3版)》 这本书的介绍吧!