vue父子组件同步传递和异步传递的介绍（附代码）

来源：动视网责编：小采时间：2020-11-27 19:27:43

vue父子组件同步传递和异步传递的介绍（附代码）

vue父子组件同步传递和异步传递的介绍（附代码）:本篇文章给大家带来的内容是关于vue父子组件同步传递和异步传递的介绍（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。1、同步传递数据父组件 food 通过 props 把值为 0 的 type 字段传给子组件，子组件在初始化时可以拿到 t

推荐度：

点击下载本文 文档为doc格式

导读vue父子组件同步传递和异步传递的介绍（附代码）:本篇文章给大家带来的内容是关于vue父子组件同步传递和异步传递的介绍（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。1、同步传递数据父组件 food 通过 props 把值为 0 的 type 字段传给子组件，子组件在初始化时可以拿到 t

本篇文章给大家带来的内容是关于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传递的数据，并修改目标对象。