vue学习大纲4-vue组件详细解读

全局组件

• 多个实例中都能用到的组件，叫全局组件
• 例如下面代码

//注册全局组件
Vue.component('leilei',{
    template:'
你好，{{msg}}
',
    //在组件中，data是个函数，返回的值才是我们的数据
    //每个组件都有自己的方法，返回自己的对象；
    data(){
        return{
            msg:'蕾蕾'
        }
    }
})
var app1=new Vue({
    el:'#app1'
});
var app2=new Vue({
    el:'#app2'
})

局部组件

• 只能在某个实例中使用的组件，不能跨实例使用；
• 注意：一个实例中，可以定义多个组件
• 例如：

var app=new Vue({
    el:'#app',
    components:{// 一个实例中，可以定义多个组件
        hello:{
            template:'
{{msg}}!ymy!!
',
            data(){
                return{
                    msg:'hello'
                }
            }
        }
    }
})

父子组件

• 这里需要注意的就是，不能直接使用：父模版嵌套子模版
• 例如：

//这种是错误的，因为到时候都会被父组件的模版替换掉，所以，我们应该在父组件的模版中使用子组件；

    

• 以上写法错误，不能实现组件嵌套：因为到时候都会被父组件的模版替换掉，所以，我们应该在父组件的模版中使用子组件；
• 例如：

• 涉及到的JS代码部分如下

var app=new Vue({
    el:'#app',
    components:{
        parent:{//父组件
            template:'#templ',
            components:{
                children:{//子组件
                    template:'
children
'
                }
            }
        },

    }
})

父组件给子组件传递数据-通过props

• 如果你接触过react，就会发现vue这点和react一样，父组件都是通过props给子组件传递数据；
• template部分，父组件给子组件传递父组件定义好的数据

• JS部分，父组件自己定义数据，同时，子组件接收数据,注意，下面代码中，包含子组件是否校验父组件传过来的数据；

components:{
    parent:{
        template:'#templ',
        data(){
            return {
                name:'hello,leilei'
            }
        },
        components:{
            children:{
                //props:{aa:String} 子组件校验父组件传过来的数据，必须为字符串类型
                props:{aa:String},//props:['aa'] 子组件只接收父组件传来的数据，不校验
                template:'
children {{aa}}
'
            }
        }
    }
}

子组件给组件传递数据- 通过events

传递步骤如下
1、 先通过子组件内部的data函数，写好子组件的数据；当子组件点击事件发生的时候，通过this.$emit给父组件发射自己的数据

this.$emit('s',this.name);

2、 在子组件名字上，添加这个s事件

3、父组件在自己的methods方法中，通过getName接收子组件传递过来的数据，通过改变自己的name值；

getName(data){
    this.name=data;
}

所有代码如下

子组件更改父组件数据，数据同步

• 核心：父组件在给子组件传递数据的时候，传递一个对象，利用对象是对地址的引用来进行更改
• 例如

data(){
    return {
        name:{name:'hello,leilei'}
    }
}

子组件更改父组件数据，但是不同步

• 实际上，就是子组件可以更改父组件传过来的值，但不影响父级，也不报错；
• 实现原理：在组件加载进来时，新创建变量，值引用的是父亲传过来的值；我们更改的只是这个新变量的值；
  注意：在自定义组件中，data都是函数，利用返回值来返回数据的
• 参考代码

components:{
        children:{
            //props:{aa:String} 子组件校验父组件传过来的数据，必须为字符串类型
            props:{aa:String},//props:['aa'] 子组件只接收父组件传来的数据，不校验
            template:'
children {{bb}}
',
            data(){
               return{
                   bb:this.aa
               }
            },
            mounted(){
                this.bb=this.aa
            },
            methods:{
                change(){
                    this.bb='vivian';
                }
            }
        }
    }
}

组件的is特性：即动态组件

• 通过component来决定显示哪个组件

• 比如：我们可以通过点击事件来切换组件;记得组件名t1必须加'单引号'哦

    显示组件1
    显示组件2
    

• JS整体代码演示

var app=new Vue({
    el:'#app',
    data:{
        comp:'t1' //:is="comp" 他决定显示哪个组件
    },
    components:{//这是定义了两个组件
        t1:{
            template:'#temp1'
        },
        t2:{
            template:'#temp2'
        }
    }
})

原始内容的插槽 slot

• slot分为没有名字的slot，和具名slot
• 没有名字的slot

    圆梦源你好！

• 具名slot

    
        
圆梦源你好！
        
张蕾
    

非父子组件数据传递：类似于原生中的"订阅发布"

var Event=new Vue;//事件； Event.$on Event.$emit
var app=new Vue({
    el:'#app',
    components:{
        hello1:{
            template:'#t1',
            methods:{
                send(){//发射事件
                    Event.$emit('myEvent','中午吃点好的')
                }
            }
        },
        hello2:{
            template:'#t2',
            data(){
                return {msg:""}
            },
            mounted(){//提前绑定好的事件
                Event.$on('myEvent',(a)=>{
                    this.msg=a;
                })
            }
        }
    }
})