在vue-cli中组件通信的方法
更新时间：2017年12月16日 09:46:32 作者：a2774206
本篇文章主要介绍了在vue-cli中组件通信的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
本文介绍了在vue-cli中组件通信的方法，分享给大家。具体如下：
vue组件之间的通信包括三种：
1.父组件向子组件通信
2.子组件向父组件通信
3.同级组件之间的通信
一.父传子组件通信
拿app.vue当父组件，content.vue当子组件
1.父组件中导入子组件（子组件导出）
import contents from './components/content';
2.在父组件中注册子组件
data() {
return {
test:'0'
};
},
components:{
'v-header':headers,
'v-content':contents
}
3.子组件通过props来接收数据
<v-content :childs='test'></v-content>
二.子与父组件通信
子组件：
<template>
<div @click="down()"></div>
</template>
methods: {
down() {
this.$emit('down','null'); //主动触发down方法，'null'为向父组件传递的数据
}
}
父组件：
<div>
<child @down="changes" :test="test"></child> //监听子组件触发的down事件,然后调用changes方法
</div>
methods: {
changes(msg) {
this.test= test;
}
}
二.非父子组件通信
//把a当作一个中转站 var a = new Vue();
组件1触发：
<div @click="eve"></div>
methods:{
eve(){
a.$emit("change",'null')
}
}
组件2接收：
<div></div>
created(){
a.$on('change',()=>{
this.msg = 'null'
})
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Element Input组件分析小结，详细的介绍了Input组件的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
开发中遇到bug是在正常不过了,而程序也基本都是bug堆里爬出来的,下面这篇文章主要给大家介绍了关于Vue脚手架安装时遇到的无法安装问题的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了vue如何将html内容转为图片并下载到本地，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
今天小编就为大家分享一篇解决vue的变量在settimeout内部效果失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了vue实现一个简单的吸顶、锚点和滚动高亮按钮效果,需要的朋友可以参考下2019-10-10
在前端开发中我们常常需要将页面页面为word文件,这篇文章主要给大家介绍了关于vue前端实现导出页面为word的两种方法,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-04-04
下面小编就为大家分享一篇vue绑定的点击事件阻止冒泡的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了Vue 嵌套路由使用总结,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-01-01
这篇文章主要为大家详细介绍了vue移动端的左右滑动事件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
Vue.js框架是什么，为什么要选择它？这篇文章为大家介绍目前前端技术使用的趋势，以及Vue.js的优点和适用场景等，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
最新评论