vue基础入门教程内容：
组件间通信
父 > 子(props down)
子 < 父 (events up)
兄弟组件
需要更过代码事例的小伙伴请留言，如果需要的比较多博主会单独上传至github（下面只贴出了两个例子）。
一、组件间通信（父组件 > 子组件）
步骤：
①父组件在调用子组件传值
<child-component myValue="123"> </child-component>
②在子组件中 获取父组件传来的值
Vue.component('child-component',{
props:['myValue'],
template:' 子组件html'
})
添加一个完整的例子（如果后面的例子需要请给博主留言，博主收到会上传到github）：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title></title>
</head>
<body>
<div id="container">
<parent-component></parent-component>
</div>
<script>
// 父组件
Vue.component('parent-component',{
data: function () {
return {
gift:'ipnoneX'
}
},
template:`
<div>
<h1>这是父组件</h1>
<hr/>
<child-component :myValue="gift"></child-component>
<child-component myValue="money"></child-component>
</div>
`
});
// 子组件
Vue.component('child-component',{
props:['myValue'],
template:`
<div>
<h1>这是子组件</h1>
<p>{{"老爹给的礼物："+myValue}}</p>
</div>
`
});
new Vue({
el: '#container',
data: {
msg: 'Hello Vue'
}
})
</script>
</body>
</html>二、组件间通信（子组件传值给父组件）
通过事件的方式来完成数据的传输。
①在父组件中 定义一个方法，用来接收子组件所通过事件传来的值
②绑定事件处理函数 (事件一般情况 都是自定义事件)
methods:{
recvMsg:function(msg){
//参数msg就是子组件通过事件出来的数据
}
}
<child-component @myEvent="recvMsg"></child-component>③在子组件触发事件
this.$emit('myEvent',myPhone)
//触发一个叫做myEvent的事件，同时把第二个参数数据传递给事件对应的处理函数
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title></title>
</head>
<body>
<div id="container">
<parent-component></parent-component>
</div>
<script>
Vue.component('parent-component',{
data: function () {
return {
sonMsg:''
}
},
methods:{
recvMsg: function (msg) {
console.log('父组件接收子组件触发的事件了:'+msg);
this.sonMsg = msg;
}
},
template:`
<div>
<h1>这是父组件</h1>
<p>子组件传来的数据为:{{sonMsg}}</p>
<hr/>
<child-component @customEvent="recvMsg">
</child-component>
</div>
`
});
Vue.component('child-component',{
data: function () {
return {
myMsg:''
}
},
methods:{
sendMsgToFather: function () {
//触发'绑定给子组件的自定义事件'
this.$emit(
'customEvent',
this.myMsg
);
}
},
template:`
<div>
<p>这是子组件</p>
<input type="text" v-model="myMsg"/>
<br/>
<button @click="sendMsgToFather">sendToFather</button>
</div>
`
});
new Vue({
el: '#container',
data: {
msg: 'Hello Vue'
}
});
</script>
</body>
</html>
总结：
在 Vue 中，父子组件的关系可以总结为 props down, events up。
父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。
三、组件间通信（$parent $refs)（经测试只能在返回的数据中进行传值）
父组件要想获取子组件的数据：
①在调用子组件的时候，指定ref属性
<child-component ref="mySon"></child-component>
②根据指定的引用的名字 找到子组件的实例对象
this.$refs.mySon
子组件要想获取父组件的数据：
①直接读取
this.$parent
四、兄弟组件间通信（event）
借助于一个公共的Vue的实例对象，不同的组件可以通过该对象完成事件的绑定和触发
var bus = new Vue();
bus.$emit()
bus.$on()大哥想要发消息二哥，
接收方（二哥）：事件绑定
bus.$on('customEvent',function(msg){
//msg就是通过事件 传递来的数据
})
发送方（大哥）：触发事件
bus.$emit('customEvent',123);总结：
父组件--》子组件
①通过属性
步骤1：
<son myName="michael" myPhone='123'></son>
<son :myName="userList[0]"></son>
步骤2：
Vue.component('son',{
props:['myName','myPhone']
})
②通过$parent
直接在子组件中通过this.$parent得到调用子组件的父组件子组件--》父组件
①events up
//步骤1：在父组件中 调用子组件的时候 绑定一个自定义事件 和 对应的处理函数
methods:{
recvMsg:function(msg){
//msg就是传递来的数据
}
}，
template:'
<son @customEvent="recvMsg"></son>
'
步骤2：在子组件中 把要发送的数据通过触发自定义事件传递给父组件
this.$emit('customEvent',123)②$refs
// reference 引用
步骤1：在调用子组件的时候 可以指定ref属性
<son ref='zhangsan'></son>
步骤2：通过$refs得到指定引用名称对应的组件实例
this.$refs.zhangsan
兄弟组件通信
步骤1：创建一个Vue的实例 作为事件绑定触发的公共的对象
var bus = new Vue();
步骤2：在接收方的组件 绑定 自定义的事件
bus.$on('customEvent',function(msg){
//msg是通过事件传递来的数据 (传递来的123)
});
步骤3：在发送方的组件 触发 自定义的事件
bus.$emit('customEvent',123);小结：边写边看，基础小节差不多就到这里结束了，后面还有路由的配置，axios的引入， 路由配置将添加进vue基础教程四（求关注）。后面会上传一个用vue-cli搭建的个人博客工程，并附上详细的教程。
转载请注明出处！！！！ 谢谢