本篇文章给大家带来的内容是关于vue父子组件同步传递和异步传递的介绍(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
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> <p class="memuManage"> <span>type: {{child_type}}</span> <span>type: {{type|formatterType}}</span> <span>info: {{info.comment}}</span> </p> </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父子组件同步传递和异步传递的介绍(附代码)的详细内容,更多请关注php中文网其它相关文章!