Vue自定义组件 Vue.component

Vue.component Vue自定义组件（1）

       如果有朋友对Vue基础还不够了解的可以先看下官方的教程 http://doc.vue-js.com/v2/guide/  这个是官方的网址，官方的教程还是写的简单易懂的。

Component是Vue.js最核心的功能，个人认为component(组件)和directive(指令)撑起了Vue的半壁江山。使用组件主要是提高代码的复用性减少代码。

讲到这个想到一个心痛的事情，项目加了个新需求在一个input上添加热搜，但是原来的input有多种功能已经由组件编写，我觉得在这个组价上再添加热搜功能的话代码耦合性太大了，而且如果业务修改这个组件改动会很大，就没有当初减少工作量的初衷了，就是单独写了个搜索展示的组件，因为在同个界面上外部有多个热搜，导致事件注册覆盖。挺难受的，下面开始正题。

首先组件需要注册，注册分为两种。全局注册可以在整个项目中使用，局部注册只能在当前定义的界面中使用。

全局注册

Vue.component('组件名称'，{

})

局部注册

new Vue({
    el:'#app',
    components:{
        '组件名称'：{
        
        }
    }
})

上面讲的只是声明注册，如果这样的项目中使用的话是展示不出东西的，没有内容的。在组件中添加 template 属性就可以展示了。

Vue.component('my-component'，{
    template:'<div style="color:red;">这里全局组件</div>'
})

展示效果

template中必须包有元素，直接展示文字是没有效果的

 

组件也是Vue的一部分，能单独存放数据存放的方式和new Vue一样声明在data中。多个相同组件data中数据不共享。 

Vue.component('my-component'，{
    template:'<div style="color:red;">这里全局组件</div>'，
    data:function(){
        return{
            datas:"存放数据",
        }
    }
})

Vue 1x时组件传递数据是双向流的，但应该安全和数据操作问题到了2.x组件数据传递边成了单项的。使用props来接受外部传入组价中的数据。props中数据接受到对象后改变后不会改变外部传递对象的值。

Vue.component('my-component'，{
    template:'<div style="color:red;">这里全局组件</div>'，
    data:function(){
        return{
            datas:"存放数据",
        }
    },
    props:{
        message:{
        
        }
    }
})

在外部使用时，如果传递对象是对象 a='入参'  <my-component :message=’a‘></my-component>

如果直接是数据  <my-component message=’入参‘></my-component>  就无需：。

props还有参数校验避免数据格式导致的报错。

type(类型校验)：String Number Boolean Object Array Function  可以一次多种数据类型，是||的关系。

type:[Boolean,Object]

default 默认值（boolean）

required  必传值 （boolean）

Vue.component('my-component'，{
    template:'<div style="color:red;">这里全局组件</div>'，
    data:function(){
        return{
            datas:"存放数据",
        }
    },
    props:{
        message:{
            type:[String,Object],   //既可以是字符串也可以对象  参数类型
            default:'默认值'，       //如果参数不传就会使用默认值
            required:true,           //参数是否必传 true 必传 会有报错提示 false不必传（默认）
        }
    }
})

讲了下组件的基础，后续还会跟进。