您的位置：首页 > Web前端 > Vue.js

vue基础入门教程（三）- 组件之间的通信

2018-08-02 16:52 826 查看

vue基础入门教程内容：

组件间通信
父 > 子(props down)
子 < 父 (events up)
兄弟组件

需要更过代码事例的小伙伴请留言，如果需要的比较多博主会单独上传至github（下面只贴出了两个例子）。

一、组件间通信（父组件 > 子组件）
步骤：
①父组件在调用子组件传值
   <child-component myValue="123"> </child-component>
②在子组件中获取父组件传来的值
Vue.component('child-component',{
   props:['myValue'],
   template:' 子组件html'
})

添加一个完整的例子（如果后面的例子需要请给博主留言，博主收到会上传到github）：

[code]<!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>

二、组件间通信（子组件传值给父组件）

通过事件的方式来完成数据的传输。

①在父组件中定义一个方法，用来接收子组件所通过事件传来的值

②绑定事件处理函数 (事件一般情况都是自定义事件)

[code]methods:{
 recvMsg:function(msg){
    //参数msg就是子组件通过事件出来的数据
 }
}
<child-component @myEvent="recvMsg"></child-component>

③在子组件触发事件
this.$emit('myEvent',myPhone)
//触发一个叫做myEvent的事件，同时把第二个参数数据传递给事件对应的处理函数

[code]<!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的实例对象，不同的组件可以通过该对象完成事件的绑定和触发

[code]var bus = new Vue();
bus.$emit()
bus.$on()

大哥想要发消息二哥，

[code]接收方（二哥）：事件绑定
    bus.$on('customEvent',function(msg){
        //msg就是通过事件 传递来的数据
    })
发送方（大哥）：触发事件
    bus.$emit('customEvent',123);

总结：
父组件--》子组件
①通过属性

[code]步骤1：
<son myName="michael" myPhone='123'></son>
<son :myName="userList[0]"></son>
步骤2：
Vue.component('son',{
  props:['myName','myPhone']
})

②通过$parent
直接在子组件中通过this.$parent得到调用子组件的父组件子组件--》父组件
①events up

[code]//步骤1：在父组件中 调用子组件的时候 绑定一个自定义事件 和 对应的处理函数
methods:{
  recvMsg:function(msg){
     //msg就是传递来的数据
  }
}，
template:'
   <son @customEvent="recvMsg"></son>
'
步骤2：在子组件中 把要发送的数据通过触发自定义事件传递给父组件
this.$emit('customEvent',123)

②$refs

[code]// reference 引用
步骤1：在调用子组件的时候 可以指定ref属性
<son ref='zhangsan'></son>
步骤2：通过$refs得到指定引用名称对应的组件实例
this.$refs.zhangsan

兄弟组件通信

[code]步骤1：创建一个Vue的实例 作为事件绑定触发的公共的对象
var bus = new Vue();
步骤2：在接收方的组件 绑定 自定义的事件
bus.$on('customEvent',function(msg){
  //msg是通过事件传递来的数据 (传递来的123)
});
步骤3：在发送方的组件 触发 自定义的事件
bus.$emit('customEvent',123);

小结：边写边看，基础小节差不多就到这里结束了，后面还有路由的配置，axios的引入，路由配置将添加进vue基础教程四（求关注）。后面会上传一个用vue-cli搭建的个人博客工程，并附上详细的教程。

转载请注明出处！！！！谢谢

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航