vue 基础父子组件传值

1.新建HelloWorld.vue  父组件，挂载子组件，接收父组件参数，调用子组件props 定义的变量

<template>
  <div class="hello" >
    <chil-den :routerData="childData" ></chil-den>
  </div>
</template>
script>
import chilDen from "../components/childen"
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      message:"",
      childData:{
        title:"我是父组件的"
      }
    }
  },
 
  components:{
    chilDen
  }
}
</script>

2.在components中新建 childen.vue 使用props 接收父组件传来的值

<template>
    <div>
        <p>我是 子组件,{{routerData.title}}</p>
      
    </div>
</template>
<script>
export default {
    props:{
        routerData:{
            type:Object,
            default:"我是子组件的默认值，待会被覆盖"
        },
    }
}

</script>