Vue.js中兄弟组件之间互相传值实例
更新时间：2017年06月01日 15:38:56 作者：小码过河找八哥
本篇文章主要介绍了Vue.js中兄弟组件之间互相传值实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
兄弟组件之间互相传值，需要建立一个“中转站”（新的vue实例），并且需要主动触发。
实例上的$on方法来接受监听。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件传值</title>
<script src="vue.js"></script>
</head>
<body>
<div id="box">
<child1></child1>
<child2></child2>
</div>
<template id="c1">
<h1>~~~~~~我是哥哥~~~~{{msg}} <button @click='fn'>点击</button></h1>
</template>
<template id="c2">
<h3>~~~~~~我是弟弟~~~~{{msg2}}</h3>
</template>
</body>
</html>
<script>
var Hub=new Vue(); // 1) 中转站,其中不需要设置任何参数
var vm=new Vue({
el: '#box',
components:{
child1:{
template:'#c1',
data:function(){
return {
msg: 'hello'
}
},
methods:{
fn:function(){
// 2) 主动触发监听(中转站触发监听)
console.log(this.msg); //hello
Hub.$emit('change',this.msg) //$emit触发监听方法
}
}
},
child2:{
template:'#c2',
data:function(){
return {
msg2: 'world'
}
},
// 创建完成 new Vue create mount
// 钩子函数
created(){
// 3) 接收监听 $on('事件名称',function(val){}) val是传递过来的值
Hub.$on('change',function(val){
console.log(val) //hello
// this.msg2 = val;
})
}
}
}
})
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
一文解决vue2 element el-table自适应高度问题
在写公司后台项目的时候遇到一个需求,要求表格页面不能有滚动条,所以必须封装一个公共方法来实现表格自适应高度,本问小编给大家介绍了如何解决vue2 element el-table自适应高度问题,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了前端vue中实现文件下载的几种方法总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
vue全局引入公共的scss和@mixin与@include的使用方式
这篇文章主要介绍了vue全局引入公共的scss和@mixin与@include的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
这篇文章主要介绍了Vue在H5 项目中使用融云进行实时个人单聊通讯,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-12-12
这篇文章主要介绍了vue如何自定义地址设置@，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
一般我们的前端Vue项目中都会涉及到跨域的问题,下面这篇文章主要给大家介绍了关于vue项目部署跨域问题的详细解决过程,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
这篇文章主要介绍了vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了vue 详情跳转至列表页实现列表页缓存，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要介绍了详解vue页面首次加载缓慢原因及解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
ant design vue中日期选择框混合时间选择器的用法说明
这篇文章主要介绍了ant design vue中日期选择框混合时间选择器的用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
最新评论