vue 组件

 

引入组件

<script>
import HeadBar from "./HeadBar"
import NavBar from "./NavBar"
import MainContent from "./MainContent"
import HelloWorld from "../components/HelloWorld";
export default {
  components:{
        HeadBar,
        NavBar,
        MainContent,
        HelloWorld,
  }
};
</script>

 

组件命名

除了按组件中定义的名称使用外，还可以 英文单词-英文单词 的方式命名；IDE中会自动提示，不需要全部手写

<template>
  <div class="container">
      <!-- 导航菜单栏 -->
      <nav-bar></nav-bar>
      <!-- 头部区域 -->
      <head-bar></head-bar>
      <!-- 主内容区域 -->
    <hello-world></hello-world>
    
  </div>
</template>