vue父组件向子组件传值

在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>

注意事项:

        props是单向绑定的：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件意外改变父组件的状态，从而导致应用的数据流向难以理解。如果子组件需要改变prop的值，它应该emit一个事件，父组件侦听到这个事件后，可以更新数据并传给子组件

通过上述步骤，就可以在Vue中实现父组件向子组件传值了