vue父子组件的通信之参数传递

1、子组件

<template>
  <div>
    <header>
      我是header
    </header>
  </div>
</template>
<script>
export default {
  // 父组件传过来的参数用props接受，参数名为profile
  props: {
    profile: {
      type: Object
    }
  }
}
</script>

<style scoped>
.head {
  background: #A4D2FB;
  height: 65px;
}
</style>

2 、父组件，在这里调用子组件，并传数据给子组件

<template>
  <div>
  	// 把chooseInfo传给子组件，取名为profile
  	<Header :profile = "chooseInfo"></Header>
     我是index
      
  </div>
</template>
<script>
// 引入要调用的子组件
import Header from '@/components/Header.vue'
export default {
  components: {
  // 注册一下子组件，即取名字
    Header
  },
  data () {
    return {
      // 传递给子组件的信息
      chooseInfo: {
	    gradeType: '初中',
	    grade: '一年级',
	    classForm: '同步课程'
	  }
  }
</script>
<style scoped>
</style>