008 组件基础

1、单文件组件（可以理解成一个文件就是一个组件）

　　Vue单文件组件（又名*.vue文件，缩写为SFC）是一种特殊的文件格式，它允许将Vue组件的模板（html）、逻辑（js）与样式（css）封装在单个文件中

　　<template>

　　　　<h3>单位组件<h3>

　　</template>

　　<script>

　　export default{

　　　　name:"MyComponent"

　　}

　　</script>

　　<style scoped>

　　h3{

　　　　color:red;

　　}

　　</style>

 

2、加载组件

　　第一步：引入组件 import MyComponentVue from'./components/MyComponent.vue'

　　第二部：挂载组件components:{MyComponentVue}

　　第三步：显示组件<my-componentVne/>

 App.vue(根组件)，最外层组件，所有组件都是基于他加载的

第一步：引入这个组件 import   组件名字 from "./组件所在文件夹/组件的全名"

第二步：挂载组件   components：{组件名字}，要写在export default{}里面

第三步：显示组件<组件名字/>,已标签的形式把他加载出来就可以了。也可以<组件-名字/>这样写，当他有多个单词的时候可以拆分成这样。

 

注意：组件在style当中有一个属性，叫scoped，意思是：如果在style中添加此属性，就代表着，当前样式，只在当前组件中生效。

　　　　　　

 3、组件的组织

　　通常一个应用会以一棵嵌套的组件树的形式来组织