vue.js 基础（10）

组件基础

简单示例

---

注意：data  必须是一个函数

 组件的组织

---

通常一个应用会以一棵树嵌套的组件树的形式来组织。

例如，页头，侧边栏、内容区等组件，每个组件又包含了其他的像导航链接、博文之类的组件。

这些组件必须先注册以便Vue能够识别。两种组件的注册类型：全局注册，局部注册。

全局注册是通过 Vue.component 实现的。

Vue.component("my-component-name",{
    //...options...
})

全局注册的组件可以用在被其注册后的任何（new  Vue）新创建的Vue根实例，也包括其组件树中的所有子组件的模板中。

通过Prop向子组件传递参数

---

Vue.component('blog-post',{
			props:['title'],
			template:"
{{title}}
"
		});
		new Vue({
			el:"#blog-post-demo",
			data:{
				posts:[
					{id:1,title:"MY"},
					{id:2,title:"your"},
					{id:3,title:"their"}
				]
			}
		});

			
		

使用 v-bind  动态传递prop.

单个根元素

---

当构建一个组件时，里面包含的东西不止一个标题，应还有正文。且每个组件必须只有一个根元素。可以将模板的内容包裹在一个父元素内。

    
{{title}}
    

但是当组件变得复杂的时候，如果为每一个相关的信息定义一个prop会变得很麻烦。应该重构这个组件，让它变成接受一个单独的post  prop：

Vue.component('blog-post',{
    prop:['post],
    template:
        

            
{{post.title}}
            

        
})

监听子组件事件

---

如果博文中要引入一个辅助功能来放大博文的字号，同时让页面其他部分保持默认字号，可以通过在其父组件中添加一个postFontSize数据属性来支持这个功能。

			

				
			
		
Vue.component('blog-post',{
			props:['post'],
			template:
				

					
{{post.title}}
					
						Enlarge
					
					

				
 
				
		});
		new Vue({
			el:"#blog-posts-events-demo",
			data:{
				posts:[/* ... */],
				postFontSize:1
			}
		});

通过插槽发布内容

---

Vue.component("alert-box",{
    template:
        

            Error!
            
        
})

动态组件

---

解析DOM模板时的注意事项

---