VUE.JS组件

组件的使用步骤：

//创建组件

        var 自定义名=Vue.extend（{

                template:"   "

        }）        

//注册组件

        Vue.component("使用名",自定义名)；

//使用组件

        <使用名></使用名>

注册组件：

        全局注册：

                语法： Vue.component("使用名",自定义名)；

                //在当前页面任何vue实例下的都可以使用。

                简化： Vue.component("使用名",{template:'      ' })

        局部注册：  

                语法：components:{

                                "使用名":自定义名

                        }

                //在当前页面的vue实例下设置了该属性才可以使用。

                简化：

                        components:{

                                "使用名":{template:'       ' }

                        }

//每一个被注册的组件都类似于一个Vue实例

组件之间的通信：

//组件中

//使用data时通常都是用函数。

//该函数需要return一个对象。

//需要定义的数据，应存在return中

<script>
    var vm=new Vue({
    el:"#app"，
    //因为这个components在该Vue实例中
    //所以 该 components中注册的组件，可以说都是Vue实例的子组件
    // Vue实例，就可以当作这些子组件的父组件
    components:{
        "my-temp":{
            template:"#my-temp",
    //因为这个components在my-temp这个组件中
    //所以 该 components中注册的组件，都是 my-temp的子组件
    //my-temp就是 这里面这些子组件的父组件
    //子组件的只能存在父组件中
            components:{
                template:"#chi1d-comp"
            }
        }
    }
    })
</script>

通过props 定义属性向子组件传递数据

插槽：

//父子组件存在的情况下

   默认插槽：

        使用：

<div id="app">
    <div>
        <P-Comp>需要分发的内容</p-comp>
    </div>
</div> 
//将外部标说引入当中

<template id="pComp">
    <div>
        <h1>使用默认插槽</h1>
        <slot></slot>
    </div>
</template>

<script src="../js/vue.min.js"></script> 

<script>
var vm=new Vue({
    el:"#app",
    components:{
        "p-comp":{
            template:"#pComp"
        }
    }
})

</script>

   具名插槽：

        使用：

<div id="app">
        <div>
            <P-Comp>
                <!-- slot-scope对应的值,只是一个形参,
                    该形参可以理解为一个作用域对象,该对象包含了该具名插槽的所有属性对应的类容 -->
                <template slot="s1">
                    <h6>使用具名插槽</h6>
                </template>
            </p-comp>
    
        </div>
    </div> 
    <!-- //将外部标说引入当中 -->
    
    <template id="pComp">
        <div>
            <h1>使用具名插槽</h1>
            <!-- 给sloat加一些属性和属性值 -->
            <slot name="s1"></slot>
        </div>
    </template>
    
    <script src="../js/vue.min.js"></script> 
    
    <script>
    var vm=new Vue({
        el:"#app",
        components:{
            "p-comp":{
                template:"#pComp"
            }
        }
    })
    
    </script>

    作用域插槽：

         

<div id="app">
        <div>
            <P-Comp>
                <!-- slot-scope对应的值,只是一个形参,
                    该形参可以理解为一个作用域对象,该对象包含了该具名插槽的所有属性对应的类容 -->
                <template slot="s1" slot-scope="s">
                    {{s.msg}}
                </template>
            </p-comp>
    
        </div>
    </div> 
    <!-- //将外部标说引入当中 -->
    
    <template id="pComp">
        <div>
            <h1>使用作用域插槽</h1>
            <!-- 给sloat加一些属性和属性值 -->
            <slot name="s1" msg="小白"></slot>
        </div>
    </template>
    
    <script src="../js/vue.min.js"></script> 
    
    <script>
    var vm=new Vue({
        el:"#app",
        components:{
            "p-comp":{
                template:"#pComp"
            }
        }
    })
    
    </script>