[12][创新实训记录]Vue父组件向子组件传值

Vue父组件向子组件传值

我们知道在vue中我们会常常用到组件模块化的思想，也就是我们常常会把一个部分包装秤一个组件来使用，但有的时候我们父组件获取的值，需要传递到子组件中继续使用

问题提出

当前用户已经登录的情况下，我在student的组件中已经获取到了当前用户的信息，但是我student的子组件是没有获取到用户信息的，在子组件中进行学生的一些数据搜索我们要在请求一遍学生信息数据吗？并不是！当然是通过父组件传递给子组件中了

问题解决

父组件：

首先需要在data中定义数据，我这边定义了Info对象用来接收登录对象

export default {
    data() {
      return {
        Info:{},
        }
    }
}

Info的复制这里就不写了，其实就是在created中进行了一个数据接口的GET获取到的

传值时，需要在父组件中引入子组件，我这里使用的是<router-view></router-view>

我们需要把这个数据定义到子组件html的标签中

<router-view :Info="Info"></router-view>

我这里就定义了相同名字的Info进行传值

子组件接收：

export default {
    props:{
        Info: {
            type:Object,
            required:true
        }
    },
}

这样子组件中就可以使用从父组件传递过来的对象数据——Info了

如果传递值是其他的类型，那么type进行相应的修改即可。