【Vue】-(9) 组件-1

组件这部分东西有点多,记录一下

//传统注册方法
//定义一个组件
var MyComponent = Vue.extend({
	template:'<div>A custom component</div>'
});
//注册
Vue.component('my-component',MyComponent);


//简单注册方法(child只能在parent内使用)
//一站式注册。。
Vue.component('my-component1',{
	template:'<div>A simple component!</div>'
});

///
//局部注册:如下，child注册在parent里面作为my-child组件,只能在parent里面使用
var child =Vue.extend({
	template:"<div>child</div>"
})
var parent=Vue.extend({
	template:"<my-child></my-child>",
	components:{
		'my-child':child
	} 
})
Vue.component('my-parent',parent)








//组件选项问题
//在Vue.extend中,如果使用data和el,如果如下
var data={a:1}
var myComponenet=Vue.extend({
	data:data
})
//这样做会将myComponenet的所有实例共享同一个data
//所以《当使用data和el的时候,需要这样
var MyComponenet = Vue.extend({
	data:function(){
		return {a:1}
	}
})


//Props
Vue.component('child',{
	//声明props
	//注意:形如myPro这种，在页面要使用my-pro
	props:['msg'],
	template:'<span>{{msg}}</span>'
});

//Vue.component('child', {
 camelCase in JavaScript
//props: ['myMessage'],
//template: '<span>{{ myMessage }}</span>'
//});

//创建根实例
new Vue({
	el:'#example',
	data:{
		text:'text'
	}
});

html:

<div id="example">
			<my-parent></my-parent>
			 Props:<br />
			 <input v-model="text" /><!--因为这是双向绑定，所以text改变 -->
	 		<child :msg="text"></child><!-- 这是单向绑定,被Input改变 -->
	</div>