head部分：

<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/vue/dist/vue.min.js"></script>

body部分的html：

<div id="app">
        <testcomponent></testcomponent>
        <testcomponent-2></testcomponent-2>
        <testcomponent-3 message="我是一个新的自定义局部组件属性展示"></testcomponent-3>
        <testcomponent-4 :message="newMessage"></testcomponent-4>
</div>

script部分代码：

<script type="text/javascript">
        //全局组件，直接用vue.component("组件名",{组件内容})创建，不仅当前页面能用，会被保存在vue中，全局可用
        //组件名，全局小写，或用-连接，不要驼峰命名
        Vue.component("testcomponent",{
            //template 组件描述
            template:'<h1>我是一个新的自定义全局组件</h1>'
        });
        new Vue({
            el:"#app",
            data:{
                newMessage:"我是一个新的自定义局部组件属性展示(data动态数据)"
            },
            //局部组件，仅在当前vue实例中生效
            components:{
                "testcomponent-2":{
                    //template 组件描述
                    template: '<h2>我是一个新的自定义局部组件</h2>'
                },
                "testcomponent-3":{
                    //prop自定义属性，props为数组
                    props: ['message'],
                    template: '<h2>{{message}}</h2>'
                },
                "testcomponent-4":{
                    //prop自定义属性，props为数组
                    props: ['message'],
                    template: '<h2>{{message}}</h2>'
                },
                "testcomponent-5":{
                    //prop自定义属性验证，props可为{}
                    //当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。
                    //type 可以是原生构造器：String,Number,Boolean,Array,Object,Date,Function,Symbol
                    props:{
                        //数量类型
                        propNum:Number,
                        //多种类型，可以放在数组中
                        propMuti:[String,Number,Boolean],
                        //必填验证
                        propRequired:{
                            //type为缺省类型，上述的两个就缺省了
                            type:String,
                            //required为true为必填
                            required:true
                        },
                        //默认属性值
                        propDefault:{
                            type:Number,
                            default:100
                        },
                        //属性值通过函数获得
                        propGetByFun:{
                            type:Object,
                            default: function(){
                                return 100;
                            }
                        },
                        //自定义的验证函数
                        propByCreate:{
                            validator:function(){
                                return ['success', 'warning', 'danger'].indexOf(value) > -1
                            }
                        }
                    } 
                }
            }
        });
    </script>
这里可以做一个总结了，自定义组件属性主要的作用是父组件往子组件传值，这里我们要知道的是即便我们自定义了组件好像我们是新建了一种，元素类型，其实不然，当我们run之后，就会发现在页面的dom树上依旧是<h1></h1>这样的标签，这也就是我们只是用基本标签通过vue的方式
堆叠起了一个伪的元素类型，这就是一个父组件，它下面的底层的基本标签类型就是子组件，我们通过父组件自定义的属性，把值传给子组件，那么反之如果我们从父组件获得子组件的值，那么就需要自定义事件了。