Vue2 props组件通信-父子组件传值

一、父组件向子组件传值

1、流程图

2、父组件代码

<template>
  <div class="app">
    <UserInfo
    :username='username'
    :age='age'
    :isSingle='isSingle'
    :car='car'
    :hobby='hobby'
    ></UserInfo>
  </div>
</template>

<script>
import UserInfo from './components/UserInfo.vue'
export default {
  data() {
    return {
      username: '小帅',
      age: 28,
      isSingle: true,
      car: {
        brand: '宝马',
      },
      hobby: ['篮球', '足球', '羽毛球'],
    }
  },
  components: {
    UserInfo,
  },
}
</script>

<style>
</style>

3、子组件代码

<template>
  <div class="userinfo">
    <h3>我是个人信息组件</h3>
    <div>姓名：{
  
  {username}}</div>
    <div>年龄：{
  
  {a