vue工程简单的子组件应用

目录结构

 

1.在src-->components-->新建子组件Home.vue(文件名要大写)

2.在文件中添加一下代码

<template>
  <div id="Home">
    <Header/>
    <div>Home</div>
    <div>{{msg}}</div>

  </div>
</template>

<script>
  import Header from "./common/Header"
  export default {
    name: "Home",
    data(){
      return{
        msg:"hello home",
      }
    },
    components:{
      Header,
    }
  }
</script>


<style scoped>


</style>

　

3.在src-->router-->app.vue中引用组件

<template>
  <div id="app">
    <!--<img src="./assets/logo.png">-->
    <!--<router-view/>-->
    <Home/>
  </div>
</template>

<script>
  import Home from './components/Home'
export default {
  name: 'App',
  data(){

  },
  components:{
    Home,
  }
}
</script>

<style>
#app {

}
</style>