组件

组件

通俗的理解就是类似于在底层封装好，制作属于自己的标签，在调用时，和使用原生的标签一样，例<my-com></my-com>,

全局组件 Vue.component(name,options)

全局都能使用的组件,想要使用都是要先实例化的

• name 组件名
• options配置参数
  • template ： 模板，只能有一个跟节点（最外层没有兄弟元素）

定义全局组件三步走
第一步:JS中定义组件

 //全局组件的定义
Vue.component('my-com', {
    data: function () {
        return {
            //组件的数据，必须返对象的形式，否则多个影响多个实例
            username: "lh",
            age: 18,
            hobby: "打羽毛球"
        }
    },
    template: `#xlh`,   
}

第二步：编html中写组件view视图部分

<template id="xlh">
    <div>
        姓名:{{username}}
        年龄:{{age}}
        爱好:{{hobby}}
    </div>
</template>

第三步：html写组件的调用 并 实例化

<!-- 入口 -->
<div id="app">
    <my-com></my-com> 
</div>

//实例化---实例化代码要在定义组件之后
new Vue({  el: '#app'});

局部组件 components

局部组件只在当前实例下可以用，与局部指令一致，两者可以一起定义。步骤与定义全局组件是一样的步骤

Vue.component('lh', {
//局部组件
    components: {
        //组件名。
        myHeader: {
            data() {
                return {}
            }
        },
        // .....
    },
     //局部指令
    directives {

    }
}