vue之组件

一、vue的组件

//在vue中，我们通过Vue.extend来创建Vue的子类，这个东西其实就是组件。
//组件分为：全局组件和局部组件(全局组件在任意的实例、父级组件中都能使用，局部组件只能在创建自己的父级组件或者实例中使用)

• 全局组件注册(2种写法)

//其一
let App = Vue.extend({
	template:"<h1>hello world</h1>"
})
Vue.component('my-app',App)

//其二
Vue.component('hello',{//Vue会自动的将此对象给Vue.extend
	template:"<h1>hello</h1>"
})

---

• 局部组件注册(2种写法)

//其一
 const Hello = Vue.extend({
        template:`<h1>hello world</h1>`
    })
    new Vue({
        el:"#app",
        components:{ //2.局部组件的注册
            hello:Hello
        }
    })

//其二
 new Vue({
        el:"#app",
		data:{},
		    components:{
		        'hello':{
		            template:"<h1>asdasdasdasdasdas</h1>"
		        }
		    }
		 })

二、组件之间的关系

//兄弟/父子/隔代关系

• 父子关系

    new Vue({
        el:"#app",
        components:{ //定义局部组件
            father:{ //定义了父组件
                template:"<div>这是father组件哦...<son></son></div>",
                components:{ 
                    son:{ //定义了子组件 （子组件只能在父组件的模板中进行调用！）
                        template:"<div>这是son组件哦...</div>"
                    }
                }
            }
        }
    })

---

• 兄弟关系

	//html代码
	 <template id="big-brother">   
        <div>
            <p>我是哥哥</p> 
        </div>
    </template>

    <template id="littel-brother">
        <div>
            <p>我是弟弟</p>
        </div>
    </template>
    
	//js代码
	 Vue.component('big-brother', {
        template:"#big-brother",
    })
    Vue.component('littel-brother', {
        template: '#littel-brother',
    })

---

• 隔代关系

  new Vue({
        el:"#app",
        components:{ //定义局部组件
            father:{ //定义了父组件
                template:"<div>这是father组件哦...<son></son></div>",
                components:{ 
                    son:{ //定义了子组件 （子组件只能在父组件的模板中进行调用！）
                        template:"<div>这是son组件哦...</div>"
                         components:{ 
			                    brother:{ 
			                        template:"<div>这是brother组件哦...</div>"
			                    }
			                }
                    }
                }
            }
        }
    })

//此时组件brother就和father形成了一个隔代关系

三、总结

今天对组件先复习一下,明天更新组件之间的通信方式