Ⅶ期VUE的Day4:组件

一： 组件componentv

 

1. 什么是组件？

    组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码

    组件是自定义元素（对象）

2. 定义组件的方式    

1. 先创建组件构造器，然后由组件构造器创建组件
2. 直接创建组件

 <div id="itapp">
        <hello></hello>
        <my-world></my-world>
        <!-- <myWorld></myWorld> -->
    </div>

// 方式1：先创建组件构造器，然后由组件构造器创建组件
        // 1. Vue.extend创建组件构造器
        var mycom = Vue.extend({
            template:'<h2>hello word</h2>'
        });
        // 2. Vue.component(组件名，组件构造器)
        Vue.component('hello',mycom);

        // 方式2：直接创建组件 (推荐)
        Vue.component('my-world',{
            template:'<h2>世界， 你好</h2>'
        });

        var vm=new Vue({ //这里的vm也是一个组件，称为根组件Root
			el:'#itapp',
			data:{
				msg:'软谋'
			}
		});	

3. 组件的分类

分类：全局组件、局部组件

<div id="itapp">
        <my-hello></my-hello>
        <my-world></my-world>
    </div>

    <div id="itapp2">
        {{name}}
        <my-hello></my-hello>
        <!-- <my-world></my-world> -->
    </div>

//  全局组件 可以在所有的vue实例中使用
        Vue.component('my-hello',{
            template:'<h2>我是全局组件</h2>',
            data(){   //在组件中存储数据时，必须以函数形式，函数返回一个对象
                return {
                    name:'laney'
                }
            }
        });

        /**
		 * 局部组件，只能在当前vue实例中使用
		 */

        var vm=new Vue({ //这里的vm也是一个组件，称为根组件Root
			el:'#itapp',
			data:{
				msg:'软谋'
			},
            components:{
                'my-world':{
                    template:'<h2>世界， 你好 {{age}}</h2>',
                    data(){  
                        return {
                            age:'20'
                        }
                    }
                }
            }
		});	

        new Vue({ //这里的vm也是一个组件，称为根组件Root
			el:'#itapp2',
			data:{
				name:'tom'
			}
        })

4. 引用模板

将组件内容放到模板<template>中并引用

<div id="itapp">
        <my-world></my-world>
    </div>

    <template id="wbs">
        <div>
            <h3>{{msg}}</h3>
            <ul>
                <li v-for="(item,index) in arr" :key="index">{{item}}</li>
            </ul>
        </div>
    </template>

var vm=new Vue({ //这里的vm也是一个组件，称为根组件Root
			el:'#itapp',
			data:{
				msg:'软谋'
			},
            components:{
                'my-world':{
                    name:'wbsx',
                    template:'#wbs',
                    data(){  
                        return {
                            age:'20',
                            msg:'hello',
                            arr:['tom','jack','laney']
                        }
                    }
                }
            }
		});	

5. 动态组件

<component :is="">组件多个组件使用同一个挂载点，然后动态的在它们之间切换 <keep-alive>组件    

<div id="itapp">
        <button @click="flag='my-hello'">显示hello组件</button>
        <button @click="flag='my-world'">显示world组件</button>
        
         <!-- 默认每次都会销毁非活动组件并重新创建
         缓存，避免重新渲染， -->
        <keep-alive>
            <component :is="flag"></component>
        </keep-alive>
        <!-- <my-world></my-world> -->
    </div>

    <template id="wbs">
        <div>
            <h3>{{msg}}</h3>
            {{time}}
            <ul>
                <li v-for="(item,index) in arr" :key="index">{{item}}</li>
            </ul>
        </div>
    </template>

 var vm=new Vue({ //这里的vm也是一个组件，称为根组件Root
			el:'#itapp',
			data:{
				msg:'软谋',
                flag:'my-hello'
			},
            components:{
                'my-world':{
                    name:'wbsx',
                    template:'#wbs',
                    data(){  
                        return {
                            age:'20',
                            msg:'world',
                            arr:['tom','jack','laney'],
                            time:Math.random()
                        }
                    }
                },
                'my-hello':{
                    template:'<h2>我是my hello {{time}}</h2>',
                    data(){
                        return {
                            time:Math.random()
                        }
                    }
                }
            }
		});	

二： 组件间数据传递

1. 父子组件

•     在一个组件内部定义另一个组件，称为父子组件
•     子组件只能在父组件内部使用
•     默认情况下，子组件无法访问父组件中的数据，每个组件实例的作用域是独立的

2. 组件间数据传递 （通信）

2.1 子组件访问父组件的数据

• 在调用子组件时，绑定想要获取的父组件中的数据
• 在子组件内部，使用props选项声明获取的数据，即接收来自父组件的数据

总结：父组件通过props向下传递数据给子组件

注：组件中的数据共有三种形式：data、props、computed

2.2 父组件访问子组件的数据

• 在子组件中使用vm.$emit(事件名,数据)触发一个自定义事件，事件名自定义
• 父组件在使用子组件的地方监听子组件触发的事件，并在父组件中定义方法，用来获取数据

    总结：子组件通过events给父组件发送消息，实际上就是子组件把自己的数据发送到父组件

<div id="itapp">
        <!-- 父组件通过props向下传递数据给子组件 -->
        <!-- <my-world :message='msg' :name="name" v-on:e-world='getData()'></my-world> -->
        <my-world :message='msg' :name="name" @e-world='getData'></my-world>
        <h1>我是父组件</h1>
        <!-- {{testName}} -->
        <h2>访问自己的数据：{{msg}}</h2>
        <h2>访问到子组件的数据：{{testkk}}</h2>
    </div>

    
    <template id="world">
        <div>
            <h1>我是world组件</h1>
           <h2>访问我自己的数据sex：{{sex}}</h2>
           <h2>访问父组件中的数据： 
               {{message}} 
               {{name}}
               {{age}}
               {{user.username}}
            </h2>
            <button type="button" @click="send"> 将子组件的数据向上传递给父组件</button>
        </div>
    </template>

        var childWorld = {
            // props:['message','name','age','user'],
            props:{
                //也可以为对象，允许配置高级设置，类型判断，数据检测，设置默认值
                message:String,
                name:{
                    type:String,
                    required:true
                },
                age:{
                    type:Number,
                    default:18,
                    validator:function(value){
                        return value>0
                    }
                },
                user:{
                    type:Object,
                    default:function(){
                        //对象或者数组的默认值必须使用函数进行返回
                       return {
                        id:100,
                        username:'秋香'
                      }
                    }
                }
            },
            data(){
                return {
                    sex:'male',
                    height:'190',
                    testName:'测试',
                }
            },
            methods:{
                send(){
                    this.$emit('e-world',{
                        testName:this.testName,
                        sex:this.sex
                    })
                }
            },
            template:'#world'
        };


        var vm=new Vue({ //这里的vm也是一个组件，称为根组件Root ,父组件
			el:'#itapp',
			data(){
                return {
					msg:'软谋',
					name:'tom',
					age:23,
					user:{id:9527,username:'唐伯虎'},
					sex:'',
					height:'',
                    testkk:{}
				}
            },
            components:{
                //子组件
                'my-world':childWorld
            },
            methods:{
                getData(data){
                    this.testkk = data;
                    console.log('sss');
                }
            }
		});