vue中父组件向子组件传值

父组件代码

<template>
  <div id="app">
    <HomePage msg="hello friday"/>   // 3.在页面中使用 并赋值
  </div>
</template>

<script>
import HomePage from './views/index.vue'  //1.引入子组件

export default {
  name: 'App',
  components: {
    HomePage   // 2.定义子组件
  }
}
</script>

子组件代码

<template>
  <div>
    <h1>{{ msg }}</h1>  // 2.需要使用父组件的值的位置
  </div>
</template>

<script>
export default {
  name:'HomePage',
  props:{
    msg: String  // 1.通过props接收父组件传递的值
  },
}
</script>