vue中的组件

组件(component):

本质上是一个vue实例，如果页面中的某部分需要在多个场景里使用，我们可以将这么部分的结构 抽离成一个组件，进行复用。

Vue里的组件也分成两种：
1.全局组件
语法：
Vue.component(“组件名”,配置对象)

Vue.component("my-header",{
    //指定组件的模板结构
    template:`**加粗样式**
        <div id="header">
            <h2>这是头部</h2>
            <ul>
            <li><a href="##">链接1</a></li>
            <li><a href="##">链接2</a></li>
            <li><a href="##">链接3</a></li>
            <li><a href="##">链接4</a></li>
            <li><a href="##">链接5</a></li>
            </ul>
        </div>
    `
});

template模板也可以在html中声明

<template id="footer">
    <section id="footers">
        <span>电话：023-23323</span>
        <span>地址：山西省太原市</span>
        <span>邮编：030000</span>
    </section>
</template>

Vue.component("my-footer",{
    template: "#footer"
});

HTML中调用组件：

<div id="root">
    <my-header></my-header>
</div>

---

2.局部组件
写到某个组件里面，使用的是components字段
语法：
“组件名”:配置对象

    components:{
        "my-order":{
            template:"#order"
        }
    }
});

组件名的命名规则：
1.不与系统关键字重名
2.vue建议的组件名命名方式：小写单词-小写单词
3.vue也支持驼峰命名法，但是在使用时还是要写成小写单词-小写单词

组件详解

组件：本质上是一个vue实例,所以，其也可以拥有自己的data数据源，当组件自己需要绑定事件时，也可以拥有自己的methods，还可以拥有filters等于vue实例一样的所有字段

• 一个组件就可以理解成一个独立的生态系统
• 组件的data必须写成一个函数，在函数里返回一个对象

面试题：为什么组件的data是要一个函数？？
答：组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

let app=new Vue({
    el:'#app',
    data:{
        msg:"你好，message"
    },
    components:{
        //Child1:Child1
        Child1//ES6语法 key和值同名时，可以只写一个
    }
});