vue组件

组件

组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义标签，所有的 Vue 组件同时也都是 Vue 的实例（对象）。

注册组件

• 全局注册，所有vue实例都可以使用

  Vue.component('element',{
	template:`<h2>我是组件</h2>`
})
	组件至少包含template模板,
	使用:将组件名作为标签名使用
      <div id="app">
			<element></element>
		</div>

• 局部注册，只能在当前实例使用

    var vue =new  Vue({
		el:'#app',
		data:{
		sonToFather:''
		},
		components:{
			tab：`<div>
				<h2>我是局部组件</h2>
			</div>
			`,
		},

父子通信

• 父向子传值

• 子向父传值
  

父子访问

• 父访问子

	<tab ref="tab"></tab> 在子组件添加ref属性
	<button type="button" @click="show">点我</button>
	data(){ // 子组件数据
	return {
			name:"zs"
		}
	}
	 show(data){
	console.log(this.$refs);// 父元素可以通过$refs访问子组件数据
		 }

• 子访问父

通过this.$parent方法