Vue组件的使用

组件是可复用的 Vue 实例, 如果网页中的某一个部分需要在多个场景中使用，那么我们可以将其抽出为一个组件进行复用。组件大大提高了代码的复用率。

一、全局注册

Vue.component('componentNew', { /* ... */ })

第一个参数为组件名，第二个参数为配置项，是一个对象的结构。
全局注册的组件可以用在任何新创建的 Vue 根实例 （new Vue）的模板中。

二、局部注册

var vm = new Vue({
	el : '#app',
	components:{
                'componentNew':{ /* ... */ }
                },
})

对于 components 对象中的每个 property 来说，其 property 名就是自定义元素的名字，其 property 值就是这个组件的选项对象。
局部注册的组件在其子组件中不可用。

三、复合组件

Vue.component('component-fatner', {
	template : `

						//引入子组件
	
`
})
Vue.component('component-son', {
	template : `

		
this is component-son
	
`
})

四、组件绑定数据与传值

Vue.component('component-fatner', {
	template : `

		
姓名：{{ name }} 年龄：{{ age }}
	
`,
	data(){
		return{
			age : 20
		}
	},
	//props:['name'] 数组形式
	props:{
	    name:{
	        type : String,//设置传值的类型
	        default : 'jack',//设置传值的默认值
	        required : true,//设置是否为必须传值
	    }
	}
})

绑定数据必须为**return{…}**的形式。
props用于传递数据，对象形式的写法可以给传参设置限制。

五、查看组件的属性
首先通过ref给子组件做一个标记
在父组件中，通过$refs就可以访问子组件
在子组件中，通过$parent就可以访问父组件

Vue.component('component-fatner', {
	template : `

		
this is component-fatner
		
		
	
`,
	methods : {
		getson(){
			console.log(this.$refs);
		}
	}
})
Vue.component('component-son', {
	template : `

		
this is component-son
		
	
`,
	methods : {
		getparent(){
			console.log(this.$parent);
		}
	}
})