Vue2.0 Component的详解（重点）

1.0 全局的component&局部的component

Vue.component('lhq',{
         template: '
我是一个全局的lhq组件
'
})

上述的虽然是全局的一个组件，能在多个vue作用域里面使用,但是必须在vue作用域里面，记住一定得在vue作用域里！！！

var app = new Vue({
          el : '#app',
          components : {
               'lhq': {
                   template:'
我是局部的一个组件
'
             }
    }
})

和全局的组件不同的是，component是加s的，因为不一定只有一个局部组件，可能有很多，还有这里的组件只能在它制定的作用域里面使用

2.0 在组件上传值

var app = new Vue({
          el : '#app',
          data:{
               country: "非洲"
           },
          components : {
               'lhq': {
                   template:'
我是来自{{here}}局部的一个组件
',
                  props: ['here']
             }
    }
})

props的值是一个数组，代表的意思是获取和设置标签上的属性值

如果组件的标签属性是一个aaa-bbb的格式，那么在props里面加的时候就要注意了,一定得按照驼峰命名法来填,props:['aaaBbb']

3.0 父子组件的嵌套

		var store = {
			template : `
我是一个绿色的商店，我的爸爸是herecomponent
`
		}
		var hereComponent = {
			template: `
			
			
			

			我是定义在构造器外部的局部组件,我的爸爸是app
			
			
			
			`,
			components: {
				'store': store
			}
		}
		var app = new Vue({
			el : '#app',
			components : {
				'wcy' : hereComponent
			}
		})

4.0 Vue自带的component组件标签

	

		
		改变组件
	

		var componentA = {
			template: `
我是组件A
`
		}
		var componentB = {
			template: `
我是组件B
`
		}
		var componentC = {
			template: `
我是组件C
`
		}
		var app = new Vue({
			el : '#app',
			data : {
				which : 'componentA'
			},
			components : {
				'componentA':componentA,
				'componentB':componentB,
				'componentC':componentC,
			},
			methods : {
				changeComponent : function(){
					if(this.which == 'componentA'){
						this.which = 'componentB'
					}else if(this.which == 'componentB'){
						this.which = 'componentC'
					}else {
						this.which = 'componentA'
					}
				}
			}
		})

这里需要注意的v-bind:is这个component的属性 可以动态的选择哪个组件