脚本宝典收集整理的这篇文章主要介绍了VUE父子组件传递数据,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
父组件 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>
要保证异步传递数据,根据VUE的双向绑定原理,不难得知,异步传递的数据需要watch。
若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>
数据存放在store中,父组件调用vuex中的方法改变数据。
若store的数据关联子组件的模板,则子组件初始化时会watch该数据。
若store的数据不关联子组件的模板,则为store的数据添加watch,在watch方法中修改关联模板的对象。需要对关联模板的对象初始化。
若父组件向子组件可能同步或异步传递数据,则首先子组件需要在created或者computed中对目标对象初始化,并且子组件中需要watch由props传递的数据,并修改目标对象。
以上是脚本宝典为你收集整理的VUE父子组件传递数据全部内容,希望文章能够帮你解决VUE父子组件传递数据所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。