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

全局组件

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

//注册全局组件
Vue.component('leilei',{
    template:'<h1>你好，{{msg}}</h1>',
    //在组件中，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:'<h2>{{msg}}!ymy!!</h2>',
            data(){
                return{
                    msg:'hello'
                }
            }
        }
    }
})

父子组件

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

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

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

<template id="templ">
    <div>
        <h2>parent</h2>
        <children></children>
    </div>
</template>

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

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

    }
})

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

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

<template id="templ">
    <div>
        <h2>parent</h2>
        <children :aa="name"></children>
    </div>
</template>

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

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

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

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

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

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

<children @s="getName"></children>

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

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

所有代码如下

<template id="templ">
    <div>
        <h2>parent {{name}}</h2>
        <children @s="getName"></children>
    </div>
</template>
<script src="js/vue2.js"></script>
<script>
    var app=new Vue({
        el:'#app',
        components:{
            parent:{
                template:'#templ',
                data(){
                    return{
                        name:'tangtang'
                    }
                },
                methods:{
                    getName(data){
                        this.name=data;
                    }
                },
                components:{
                    children:{
                        template:'<h3 @click="changename">children</h3>',
                        data(){
                            return {
                                name:'Vivian'
                            }
                        },
                        methods:{
                            changename(){
                                //子组件发射一个事件给父组件，告诉自己的名字
                                this.$emit('s',this.name)
                            }
                        }
                    }
                }
            },

        }
    })
</script>

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

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

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

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

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

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

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

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

<component v-bind:is="currentView">
  <!-- 组件在 vm.currentview 变化时改变！ -->
</component>

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

<div id="app">
    <button @click="comp='t1'">显示组件1</button>
    <button @click="comp='t2'">显示组件2</button>
    <component :is="comp"></component>
</div>

• JS整体代码演示

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

原始内容的插槽 slot

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

<div id="app">
    <hello>圆梦源你好！</hello>
</div>
<template id="t1">
    <div>hello! <slot></slot></div>
</template>

• 具名slot

<div id="app">
    <hello>
        <div slot="d1">圆梦源你好！</div>
        <div slot="d2">张蕾</div>
    </hello>
</div>
<template id="t1">
    <div>hello! <slot name="d2"></slot><slot name="d1"></slot></div>
</template>

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

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;
                })
            }
        }
    }
})