Vue 父组件向子组件传值,并且异步改变prop;

初始的时候,没有数据,因此父组件向子组件传入了一个空对象,等到数据请求回来之后,更新子组件的 prop ;并且执行其他逻辑.

1. 通过 ref 调用子组件的方法,执行相应的逻辑

父组件是这样的:

<template>
	<child-component ref="child"/>
</template>
<script >
export default {
    name: 'FatherComponent',
    mounted(){
        // 用定时器模拟异步网络请求,
        setTimeout(()=>{
            // 假设 res 是请求回来的数据
            // 方法 1  通过$refs 调用子组件的方法, 并传入请求结果
            this.$refs.child.hangleProp(res);
        })
    }
}
</script>

子组件是这样的 :

<template>
	<div>{{res}}</div>
</template>
<script >
export default {
    name: 'ChildComponent',
    data() {
     return {
      res: ''
     };
    },
    methods: {
        /*该方法用于接收值,并处理父组件穿过来的值*/
     hangleProp(data) {
         // 这是通过方式 1 实现的传值,
      console.log('父组件通过 $refs 穿过来的值是 : ',data);
     }
    },
}
</script>

2. 通过 props 传值的方式,但是异步的,我们需要用 watch 来监听属性值的变化;

父组件是这样的:

<template>
	<child-component v-bind:pass-data="ajaxResult" />
</template>
<script >
export default {
    name: 'FatherComponent',
    data() {
     return {
      ajaxResult: null
     };
    },
    mounted(){
        // 用定时器模拟异步网络请求,
        setTimeout(()=>{
            // 假设 res 是请求回来的数据
            // 方法二 : 通过 绑定属性的方式动态传值 
            this.ajaxResult = res; // 这里父组件的 ajax 改变了;
        })
    }
}
</script>

子组件是这样的 :

<template>
	<div>{{res}}</div>
</template>
<script >
export default {
    name: 'ChildComponent',
    props: {
     passData: {
      type: Object,
      default: null
     },
    },
   watch: {
        passData(){
            console.log('passData 改变了',this.passData);
            // 接下来就可以执行其他的操作了;比如说,初始化 echarts 图标
        }
   }
}
</script>

好了,就到这里了.