vuejs之组件介绍及简单使用

什么是组件

对于一些大型的网站，我们可以看到他们的各部分页面其实有很多事相同的，如头部和尾部，以及一样列表的样式，它们都是可以被反复使用的。为了代码的复用和后期维护的方便，我们一般会尽可能将公共的那一部分提取出来，形成单独的一部份，供其他地方使用，我们把这公共的部分叫做组件
组件里一般会包括页面结构，样式，数据和生命周期函数
如果我们做的足够的抽象提取，那么这些公共的部分可以被很多第三方进行使用。这种一般称为第三方的组件（如 bootstrap）

为什么要使用组件

为了代码的复用和便于后期的维护

如何使用组件（vuejs）

https://cn.vuejs.org/v2/guide/components-registration.html（vuejs 官网文档，如有兴趣可以进去看看）

组件是可复用的 Vue 实例，且带有一个名字（官网解释）

vuejs 中组件分为两种：

1：全局组件：需要定义在 vue 实例化对象之前定义实例化，相当于是声明
2：局部组件：必须定义在实例化对象里面
接下来我们就来单独看一看

全局组件

1: 定义一个全局组件，用 component 方法，里面有两个参数

参数1： 组件的名称（1：组件的名称，不要和系统标签重名；2：组件的命名建议使用烤串式命名法（中划线命名））
因为浏览器对于不认识的标签不会报错，并且不区分大小写，统一转换成小写，这样一来，我们在定义的时候用的是小驼峰，但是我们在调用的时候浏览器把它转成小写，就找不到我们定义的组件了
参数2： 组件的描述，是一个对象，对象用来描述这些组件的行为，组件被调用后应该呈现什么样子，组件里的数据等
参数 2 里面的基本属性：template：组件的模板（组件的 DOM 结构），通俗一点就是 vuejs 组件就是我们开发者自定义的 html 标签，他就像系统的 html 标签一样，能够被解析，我们来看一下面的例子

<script>
//定义在 vm 对象之前
//mycomponent:组件的名字（我们自定 html 的名字）
//template:组件的 DOM 结构
    Vue.component("mycomponent",{
        template: "<h2>我是一个组件</h2>"
    })

    var vm = new Vue({
        el: "#box",
        data: {
            title: "component"
        }
    })
</script>

2: 使用组件：之前说了我们的组件就是自定义的 html 标签，那我们也要向 html 标签一样使用它，可以是单标签，也可以是双标签（但是如果有数据，则必须为双标签）

组件的本质：就是使用我们定义组件时候的 template 里面的模板替换页面上的组件

<div id="box">
    <h1>{{ title }}</h1>
    //引用组件
    <mycomponent></mycomponent>
</div>

3: vue 组件模板里有且仅有一个根节点

Vue.component("mycomponent",{
        template: "<h2>我是一个组件</h2><h3> 我是组件里的标签</h3>"
    })

我们看到，如果我们这样写的话，控制台就会给我们警告，因为 vue 组件模板里有且仅有一个根节点 所以我们以后一上来就要定义根节点，这样就好了

Vue.component("mycomponent",{        
        template: `
            <div>
                <h2>我是一个组件</h2><h3> 我是组件里的标签</h3>
            </div>
          `
    })

局部组件

1: 定义一个局部组件，必须定义在实例化对象里面

<script>
    var vm = new Vue({
        el: '#box',
        data: {
            title: 'private component'
        },
        components: {
        //我们也可以定义多个组件
            mycomponent: {
                template: "<h2>我是局部组件</h2>"
            },
            mycomponent2: {
                template: `
                        <div>
                            <h2>我也是局部组件</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem cum, esse id illum laboriosam magni minima, nesciunt nisi odio placeat possimus quaerat repellat repellendus, reprehenderit unde vel voluptates voluptatibus!</p>
                        </div>
                `
            }
        }
    })
</script>

2：使用方式与全局组件一样，可以用单标签也可以用双标签

<div id="box">
    <mycomponent></mycomponent>
    <mycomponent2>
</div>

3：使用方式与全局组件一样，可以用单标签也可以用双标签

从上面的例子我们可以看出，定义局部组件的时候，如果局部组件的组件对象很多，全部放在实例对象里面也不太好，所以我们一般都是将实例对象单独拿出来的

<div id="box">
    <mycomponent></mycomponent>
    <component_out />
</div>
<script>
    var component_out = {
        template: `
                        <div>
                            <h2>我也是局部组件</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem cum, esse id illum laboriosam magni minima, nesciunt nisi odio placeat possimus quaerat repellat repellendus, reprehenderit unde vel voluptates voluptatibus!</p>
                        </div>
                `
    }
    var vm = new Vue({
        el: '#box',
        data: {
            title: 'private component'
        },
        components: {
            mycomponent: {
                template: "<h2>我是局部组件</h2>"
            },
           component_out,
        }
    })
</script>