一.实例与组件
首先，在vue中组件其实就是一个实例，它是以实例的形式进行创建的，如：
实例： new Vue({
el:'',
component:{}
data:'',
});
组件：Vue.component('',{
template:'',//用来进行编写组件内容的，如：<div>Hello World</div>,此处展示的就是div框中的内容
data:function(){
return {
message:''
}
}
});
向上面所示，其实组件的内部属性，与定义的vue实例是一样的，所以组件就是实例，但是data是要以函数的形式返回数据的，这点在搭建webpack工程或者使用vue-cli快速构建工具中，体现的最明显，基本上data的形式都是以函数的形式进行返回的，另外组件是可以进行嵌套的，也就是说在组件中还可以进行组件的定义。
二.组件通信
父组件与子组件通信：
父组件传递数据给子组件：props，例如：
<my-component :message='message'></my-component>
Vue.component('my-component',{
props: ['message'],
template:'<div>{{message}}</div>'
});
new Vue({
el:'',
data:{
message:'Hello World'
}
});
子组件传递数据给父组件：$emit,用来触发事件，同时可以进行参数的传递，如：
<my-component
@increase='handleGetTotalCount'
@reduce='handleGetTotalCount'
></my-component>
Vue.component('my-component',{
props:['total'],
template:'<div>\
<button @click="handleIncrease">+1</button>\
<button @click="handleReduce">-1</button>\
</div>',
data:function(){
return {
counter: 0
}
},
methods:{
handleIncrease:function(){
this.counter++;
this.$emit('increase',this.counter);
},
handleReduce:function(){
this.counter--;
this.$emit('reduce',this.counter);
}
}
});
new Vue({
el:'#app',
data:{
totalCount:6
},
methods:{
handleGetTotal:function(count){
this.totalCount+= count
}
}
});
如上述所示，子组件中由点击函数来对$emit进行触发，其中，$emit('','')中，有两个参数需要填写，第一个是一种映射值（也 就是自定义事件的名称），第 二个是传入父组件的参数值（这个值可以不填也可以多填），父组件根据映射值来匹配传来的数字，如 上述父组件中使用子组件时，用了@increase=''，这个increase就是用来匹配对应的子组件中emit上来的值的。
非父子组件通信：
在Vue.js1.0时提供了$dispatch()与$broadcast()两个方法。$dispatch()用于向上级派发事件，只要是它的父级，都可以在Vue实例 的events选项内接收。
例如：
<div id="app">
{{ message }}
<my-component></my-component>
</div>
Vue.component('my-component',{
template:'<button @click="handleDispatch">发送数据</button>',
methods:{
handleDispatch:function(){
this.$dispatch('on-message','内部数据');
}
}
});
new Vue({
el:'#app',
data:{
message:''
},
events:{
'on-message':function(msg){
this.message = msg;
}
}
});
$broadcast()是上级向下级传递，用法完全一致。
不过，在Vue.js2.0中已经废弃了以上的用法，那么Vue.js2.0采取什么样的形式进行组件间的通信了，运用一个中介进行操作，作为 数据传递的一个容器，这个中介可以用vue的一个实例进行。
例如:
<div id="app">
{{ message }}
<componentOne></componentOne>
</div>
var bus = new Vue();
Vue.component('componentOne',{
template:'<button @click="handleEvent">事件</button>',
methods:{
handleEvent:function(){
bus.$emit('on-message','数据');
}
}
});
var app = new Vue({
el:'#app',
data:{
message:''
},
mounted:function(){
var _this = this;
bus.$on('on-message',function(msg){
_this.message = msg;
});
}
});
以上中，利用bus实例进行事件触发操作，进行值的传递，这样子组件与父组件就不用直接关联，可以通过bus这个实例进行数据的传 递。另外，bus实例中可以进行公用属性的设置，如data，methods，computed等信息，在业务中，如用户的一些基本信息：昵称，性别， 邮箱，token等，在bus初始化时进行获取一次就行。
一般在项目中的开发中，我们会用到状态管理解决方案vuex，后续进行介绍
扫一扫
1912
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
