Vue.js学习（7）-组件创建，注册，使用

1.组件的构成和基本使用

• 组件的基本构成

• 组件的使用有三步：

  1.引用组件   

 import Header from "./Header.vue";   

  2.挂载组件      

 components:{
         "v-header":Header
      } 

  3.在模板中使用组件

 <v-header></v-header>

2.组件的多层调用实例

• 调用层次结构

• 组件文件目录结构，没有的文件是自己建立的

App.vue

<template>
  <div id="app">
    <br>
    <h2>{{msg}}</h2>
    <hr>
    <v-home></v-home>
    <v-news></v-news>
  </div>
</template>

<script>
  import Home from "./components/Home.vue";
  import News from "./components/News.vue";
export default {
  name: 'app',
  data () {
    return {
     msg:"App.vue是一个根组件"
    }
  },
  components:{
    "v-home":Home,
    "v-news":News
  }
}
</script>

<style lang="scss" scoped>//scoped使css局部的，只作用于本组件文件
  h2{
    color: blueviolet;
  }
</style>

Home.vue

<template>
    <div>
      <br>
      <h2>{{msg}}</h2>
      <hr>
      <v-header></v-header>
    </div>
</template>

<script>
  import Header from "./Header.vue";
    export default {
        name: "Home",
      data(){
          return{
            msg:"Home.vue是一个首页组件",
          }
      },
      components:{
         "v-header":Header
      }
    }
</script>

<style scoped>

</style>

News.vue

<template>
  <div>
    <br>
    <h2>{{msg}}</h2>
    <hr>
  </div>
</template>

<script>

    export default {
        name: "News",
      data(){
        return{
          msg:"News.vue是一个新闻组件",
        }
      }
    }
</script>

<style scoped>

</style>

Header.vue

<template>
  <div>
    <br>
    <h2 class="header">{{msg}}</h2>
    <hr>
  </div>
</template>

<script>
    export default {
        name: "Header",
      data(){
        return{
          msg:"Header.vue是一个头部组件",
        }
      }
    }
</script>

<style scoped>
.header{
  color: red;
  background: black;
}
</style>

运行结果