父组件代码
<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>