1.组件，什么是组件，可以这样理解，一个页面有可能包含很多逻辑，很混乱，当我们将这一大坨东西分为很多个小东西，每一个小东西只完成自己的功能，和其他的小东西互不干涉，页面想要使用，只需要引入就行了。
2.组件的使用可分为三步：一创建组件构造器，二注册组件，三使用组件
3.其实每一个组件就相当于一个vue实例，它也有自己的template,method,data，components这些东西，data必须是一个函数，为什么是一个函数呢？组件式可以多复用的，也就是说，可以在很多地方通过引入标签名的方式来使用组件，如果不是函数，那么调用了这些组件的那些界面的数据随时时刻都要一起发生变化，不符合实际，应该是每一个组件实例都拥有自己一份的数据。
4.组件的基本使用例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="content">
    <!--3.使用组件标签，注意：要想组件生效，当前元素，必须与vue实例挂钩-->
    <com/>
</div>
<script src="./vue.js"></script>
<script>
    //1.创建组件构造器
    const myCom = Vue.extend({
        template: `
            <div>
                <h2>我是组件的内容</h2>
            </div>
        `
    })

    //2.注册组件，注意：通过Vue.component()这种方式注册组件为全局注册，每一个vue实例都可以使用
    //如果是在一个vue实例里注册的组件，那么该组件称为局部组件只能在当前vue实例里使用
    //前面参数为组件标签名，后面参数为组件
    Vue.component("com",myCom)

    const app = new Vue({
        el: '#content'
    })
</script>
</body>
</html>

结果

vue functional组件 vue组件使用_html


5.创建并且注册组件常常用这种语法糖写法

//创建和注册组件的语法糖
    Vue.component("com",{
        template: `
            <div>
                <h2>我是组件的内容</h2>
            </div>
        `
    })

6.父组件和子组件，其实当我们在使用父组件的标签的使用，vue底层首先会去看这个组件有没有子组件，有的话，会先去编译好子组件再编译父组件。
例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="content">
    <!--3.使用父组件标签，于此同时，如下父组件也使用了子组件的标签ccom-->
    <pcom/>
</div>
<script src="./vue.js"></script>
<script>
    //注册一个父组件
    Vue.component("pcom",{
        template: `
            <div>
                <h2>我是父组件</h2>
                <ccom/>
            </div>
        `,
        components: {
            //注册一个子组件
            ccom: {
                template: `
            <div>
                <h2>我是子组件</h2>
            </div>
        `
            }
        }
    })

    const app = new Vue({
        el: '#content'
    })
</script>
</body>
</html>

结果

vue functional组件 vue组件使用_html_02


7.模板分离，其实当template的东西过多时，我们会觉得很乱，其实可以抽取出来

1）方法一，用template标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="content">
    <!--组件标签-->
    <com/>
</div>
<template id="temp">
    <div>
        <h2>我是组件</h2>
    </div>
</template>
<script src="./vue.js"></script>
<script>
    //注册一个组件
    Vue.component("com",{
        template: "#temp"
    })

    const app = new Vue({
        el: '#content'
    })
</script>
</body>
</html>

2）方法二，使用script标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="content">
    <!--组件标签-->
    <com/>
</div>
<script type="text/x-template" id="temp">
    <div>
        <h2>我是组件</h2>
    </div>
</script>
<script src="./vue.js"></script>
<script>
    //注册一个组件
    Vue.component("com",{
        template: "#temp"
    })

    const app = new Vue({
        el: '#content'
    })
</script>
</body>
</html>