vue父组件向子组件传值的两种方法

目录

1. 1. 1. 通过 ref 调用子组件的方法,执行相应的逻辑
2. 2. 2. 通过 props 传值的方式,但是异步的,我们需要用 watch 来监听属性值的变化;

Vue 父组件向子组件传值,可以通过ref，也可以通过props

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>