这是我参与「第四届青训营」笔记创作活动的的第1天 组件（Component）是 Vue.js 最强大的功能之一。

Vue组件

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

非单文件组件

模板编写没有提示
没有构建过程, 无法将 ES6 转换成 ES5
不支持组件的 CSS
真正开发中几乎不用

Vue中使用组件的三大步骤：

一、定义组件(创建组件)
二、注册组件
三、使用组件(写组件标签)

一、如何定义一个组件？

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样

区别如下：

el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。

data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。

备注：使用template可以配置组件结构。

二、如何注册组件？

局部注册：靠new Vue的时候传入components选项

全局注册：靠Vue.component('组件名',组件)

三、编写组件标签：

<school></school> Code:

<div id="root">
        <!-- 3.编写组件标签 -->
        <school></school>
        <hr>
        <!-- 3.编写组件标签 -->
        <student></student>
        <hr>
        <!-- 3.编写组件标签 -->
        <hello></hello>
    </div>
    <script>
        //1.创建组件
        const school = Vue.extend({
            data(){
                return{
                    name:'工商',
                    address:'重庆'
                }
            },
            template:`
                    <div>
                        <h1>学校名称：{{name}}</h1>
                        <h1>学校地址：{{address}}</h1>    
                    </div>
            `,
        })
        //1.创建组件
        const student = Vue.extend({
            template:`
                <div>
                    <h1>学生名称：{{name}}</h1>
                    <h1>学生年龄：{{age}}</h1>
                    <button @click="showAge">点我提示年龄</button>
                </div>
            `,
            data(){
                return{
                    name:'张三',
                    age:'21'
                }
            },
            methods:{
                showAge(){
                    alert(this.age)
                }
            }
        })

        //1.创建组件
        const hello = Vue.extend({
            template:`
                <div>
                    <h2>你好！{{name}},我是全局组件</h2>
                </div>
            `,
            data(){
                return{
                    name:'Hjh'
                }
            }
        })

        //2.全局注册组件
		Vue.component('hello',hello)

        new Vue({
            el: '#root',
            
            //2.注册局内组件
            components:{
                school,
                student
            }
        });
    </script>

单文件组件

一个.vue 文件的组成(3 个部分) 模板页面

<template>
    页面模板
</template>

JS 模块对象

<script>
export default {
  data() {
    return {
  }},
  methods: {
  },
  computed: {
  },
  components: {
  }
</script>

样式

<stytle>
样式定义
</stytle>

几个注意点：

关于组件名:

一个单词组成：
    第一种写法(首字母小写)：school
    第二种写法(首字母大写)：School
多个单词组成：
    第一种写法(kebab-case命名)：my-school
    第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)

备注：
    (1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
    (2).可以使用name配置项指定组件在开发者工具中呈现的名字。

关于组件标签:

第一种写法：<school></school>
第二种写法：<school/>

备注：
不用使用脚手架时，会导致后续组件不能渲染。

一个简写方式：

const school = Vue.extend(options) 可简写为：const school = options

Vue组件 ｜ 青训营笔记