组件之间通信:
同级组件之间通信:两个组件定义应用到同一个vue实例之下:
<div id="webapp" class="box">
<my-header></my-header>
<slid-bar class="left_nav_bar" @name-change="changename"></slid-bar>
<table-body :data-name="aaa"></table-body>
</div>
如,webapp会创建一个实例,而slid-bar和table-body之间需要进行数据通信,下面将要把slid-bar中的数据传递给table-body
首先在sild-bar组件内部template中将要传递出来的数据传递给一个函数,
<button class="countries" @click="pagechange(\'Countries\')">countries</button>\
<button class="operators" @click="pagechange(\'Operators\')">operators</button>
在接收的函数中进行发射：
methods:{
pagechange:function(prmt){
this.nowpage = prmt;
this.$emit('name-change',this.nowpage);
// 向父组件中派发事件
}
},
发射出来的事件需要在本组件使用时绑定，而事件的值需要在父组件或父实例中进行方法定义changename：
var vm = new Vue({
el: '#webapp',
data:{
dataname:'',
prefix: ''
},
methods:{
changename:function(paramater){
// console.log(paramater);
this.dataname=paramater;
// 父组件中接收事件
}
}
});
并且在实例中定义一个变量用来接收传递过来的参数，如上面dataname
这样就完成了子组件向父组件传递数据，之后再子组件中进行接收就可以了
Vue.component('table-body',{
props:['dataName'],
这样在子组件里面就可以直接用这个变量了。
我们用以下几个步骤来理解组件的创建和注册：
1. Vue.extend()是Vue构造器的扩展，调用Vue.extend()创建的是一个组件构造器，而不是一个具体的组件实例。
2. Vue.extend()构造器有一个选项对象，选项对象的template属性用于定义组件要渲染的HTML。
3. 使用Vue.component()注册组件时，需要提供2个参数，第1个参数时组件的标签，第2个参数是组件构造器。
4. Vue.component()方法内部会调用组件构造器，创建一个组件实例。
5. 组件应该挂载到某个Vue实例下，否则它不会生效。