思想

组件树

优势

===============================

基本用法（Vue Cli）

1、创建子组件

项目默认会创建一个components 文件夹，给你放组件。
这里还可以创建一个common 文件夹，放一些其他项目也能用的组件，到时候直接一个文件夹复制过去就能用
还可以创建content 文件夹，放入针对本项目的公共组件，放到别的项目无法直接用的

组件要包含2个部分：
1、Html部分：用 把内容括起来，里面至少要用一个div把所有内容包起来

<template>
  <div>
    <H1>{{msg}}</H1>
  </div>
</template>

2、Vue部分：固定要export default{ } 把js代码扩起来，最少要有一个name 属性

props属性是父组件给这个组件传进来的变量，下面会说。

<script>
  export default{
    name: 'Title1',
    props: {
      msg: String
    },
    data() {
      return {
      }
    }
  };
</script>

2、在父组件中注册

哪里需要用，哪里就需要引入和注册。

注册组件，有2步：
1、引入组件，让Vue 知道组件的位置，和组件在本模板的新名字
2、export default 对象里面，添加components 选项，选项里面添加组件的新名字

<script>
  //1、引入子组件，和给引入的组件命名
  import Title1 from '../../components/Title1.vue'
export default {
  data() {
    return {
    };
  },
  //2、注册组件
  components:{
    Title1
  }
};
</script>

3、使用组件

模板内使用组件，可以把组件的名字，作为Html标签放入，可以用组件自己定义的html标签属性。
可以多次复用，而且每个组件都是独立的

<template>
  <div>
    <!-- 使用组件 -->
    <Title1></Title1>
    <Title1></Title1>
    <Title1></Title1>
    <Title1></Title1>
    <Title1></Title1>
  </div>
</template>

4、组件样式

.vue 文件页面还可以写一个