Vue.js——组件(局部&全局)

全局组件

创建全局组件

Vue.component({'组件名'， {
	template:'模板id',	//模板id
	data(){		//data必须是方法!
		return {
			//返回数据
		}
    },
    props:['变量名'],	//props用于接收父组件的数据  此处也可以用对象{}  然后在里面写一些动态的验证规则  例如 type:number
    //根组件有的选项它都具备，例如生命周期mounted created，此处只简单列举几个
    methods:{},
    computed:{},
    watch:{}
}})

父子组件间数据的交互

• 父组件传递数据到子组件，子组件要通过props接收，然后在模板中进行绑定 :props声明的变量名=[‘父组件中的变量名’]，然后通过表达式就可以在子组件的模板中使用 {{}} PS：需要注意的是这个传递只是单向的，即子组件改变了这个数据父组件的数据不会改变！
• 父子组件实现数据的双向绑定要在子组件实现数据绑定的时候加上 .sync修饰符
• 子组件传递数据给父组件，需要通过在该子组件中相应方法中 this.$emit(‘指令名’，需要传递的数据) 然后在页面中绑定通过该指令绑定父组件的方法，该组件再通过该方法 方法名(接收数据的形参) 则可以实现子组件传递数据到父组件

非父子组件间的数据交互

• 非父子组件之间的通信，可以通过一个空的vue(假设该实例的名称为evm)实例作为组件间交流的枢纽，然后通过该实例发送和监听该对象完成非父子组件之间的数据的传输，如：

    evm.$emit('v-a',a) //组件a中发送事件
    //如果组件b要接收,可以放在该组件的mounted挂载完的事件中执行
    mounted(){
      //需要注意的是$on()的第二个参数是一个回调函数，这里一定要用ES6的箭头函数，否则this是指evm而不是当前组件！
	      evm.$on('v-a',a=>{
	        this.a = a
	        })
    }

局部组件

局部组件与全局组件的不同在于它是写在vue实例的components选项中的，其他都和全局组件相同。