Vue-组件(一)

组件是可复用的vue实例，并且带有一个名字；可以在Vue根实例中定义，在html中调用

组件注册：可分为全局注册和局部注册

　　全局注册：

　　　　Vue.component('组件名1',{

　　　　　　data:function(){　　//data必须是函数的形式

　　　　　　　　return{count:0}

　　　　　　},

　　　　　　template:'<div>Thsi is my Component</div>'

　　　　})

　　局部注册：

　　　　const Component = {

　　　　　　templata:'<div>This is my Component</div>'

　　　　}

　　局部注册的组件在其子组件中不可用，可使用以下方法：

　　　　const Component_3 = {

                　　components:{

                　　　　'组件名2':component

               　　 },

               template:'<div>

                          <h2>this is component_3 Star</h2>

                          <component_2></component_2>

                          <h2>this is component_3 End</h2>

                          </div>'

　　　　}

　　　　在Vue根实例中：

　　　　　　components:{

　　　　　　　　'组件名2' : component

　　　　　　}

　　　　通过babel和webpack来使用：

　　　　　　import component from './component.vue'

　　　　　　export default{

　　　　　　　　components:{

　　　　　　　　　　component

　　　　　　　　},

　　　　　　　　//...

　　　　　　}

组件调用：在html里Vue绑定的标签中要放入组件的位置

　　<组件名1></组件名1>

　　<组件名2></组件名2>

ps:组件名字使用驼峰命名，调用时使用‘大写前加-，大写改小写的’写法也是可以的

                如：组件名：ComtName   调用：<ComName>或<Com-name> 

                直接在DOM中使用时只有Com-name有效

　　

Prop:prop是组件上注册的自定义的attribute，当一个值传递给一个prop attribute的时候，它变成了那个组件实例的一个property

组件的使用比较复杂，可使用实例查看：

<div>
        <div id="app2">
            <!-- prop是组件上注册的自定义的attribute，
                当一个值传递给一个prop attribute的时候，
                它变成了那个组件实例的一个property
            -->
            <component_4 title="This is prop4_1"></component_4>
            <component_4 title="This is prop4_2"></component_4>
            <component_4 title="This is prop4_3"></component_4>
            <!--每个组件只能有一个根目录， 
                当想传入多个数据时，可将数据以数组形式写入data内，
                用v-for遍历，v-bind绑定数组，之后在组件中的props调用
                组件中的数据就可以调用data中数组的值
            -->
            <component_5 v-for="post in posts1" :keys="post.id" :title="post.value" ></component_5>
            <component_6 v-for="post in posts2" :key="post.id" :post="post"></component_6>
            <!--可直接写入属性，如类，样式
                
            -->
            <component_7 class="this" style="color:blue"></component_7>
        </div>
        <script>
            Vue.component('component_4',{
                props:['title'],
                template:'<h2>{{title}}</h2>'
            })
            Vue.component('component_5',{
                props:['title','keys'],
                template:'<h2>This is {{keys}}  No.{{title}}</h2>'
            })
            Vue.component('component_6',{
                props:['post'],
                template:'<h2>this is {{post.id}} , No.{{post.value}}</h2>'
            })
            Vue.component('component_7',{
                // 如不想继承组件的属性，可使用：inheritAttrs:flase
                template:'<h2>this is Component_7</h2>'
            })
            new Vue({
                el:"#app2",
                data:{
                    posts1:[
                        {id:'5-1',value:'prop5_1'},
                        {id:'5-2',value:'prop5_2'},
                        {id:'5-3',value:'prop5_3'}
                    ],
                    posts2:[
                        {id:'6-1',value:'prop6_1'},
                        {id:'6-2',value:'prop6_2'},
                        {id:'6-3',value:'prop6_3'}
                    ]
                }
            })
        </script>
    </div>