vue组件之间的通信
1.父组件给子组件传递数据
<body>
<div id="app">
父组件：{{total}}
<br>
<son-component v-bind:total="total"></son-component>
</div>
<script>
Vue.component('son-component',{
template:'<div>子组件：{{total}}+{{num}}={{add}}</div>',
props:{
total:Number
},
data(){
return {
num:10
}
},
computed:{
add:function(){
return num=this.total+this.num
}
}
})
var app=new Vue({
el:'#app',
data:{
total:1
},
})
</script>
</body>
通过v-bind动态绑定父组件中要传递的数据，子组件通过props属性接收父组件传递的数据。
2.子组件给父组件传递数据
<body>
<div id="app">
<son-component v-on:change="getData"></son-component>
<br>
{{total}}
</div>
<script>
Vue.component('son-component',{
template:'<button v-on:click=sendData>点击我向父组件传值</button>',
data(){
return{
count:1
}
},
methods:{
sendData:function(){
this.$emit('change',this.count)
}
}
})
var app=new Vue({
el:'#app',
data:{
total:1
},
methods:{
getData:function(value){
this.total=this.total+value
}
}
})
</script>
</body>
自定义一个事件，在子组件中通过this.$emit()触发自定义事件并给父组件传递数据，在父组件中监听自定义事件并接收数据。
3.非父子组件之间的通信
<body>
<div id="app">
<a-component></a-component>
<b-component></b-component>
</div>
<script>
Vue.component('a-component',{
template:`
<div>
<span>a组件的数据：{{num}}</span><br>
<button v-on:click="sendData">击我向b组件传递数据</button>
</div>
`,
data(){
return {
num:1
}
},
methods:{
sendData:function(){
this.$root.bus.$emit('change',this.num)
}
}
})
Vue.component('b-component',{
template:`
<div>b组件接收a组件数据后相加的数据：{{count}}</div>
`,
data(){
return {
count: 10
}
},
created:function(){
this.$root.bus.$on('change',(value)=>{
//alert(value)
this.count=this.count+value
})
}
})
var app=new Vue({
el:'#app',
data:{
bus:new Vue()
},
})
</script>
</body>
vue组件之间的通信的更多相关文章
- vuex-- Vue.的中心化状态管理方案（vue 组件之间的通信简化机制）
vuex-- Vue.的中心化状态管理方案(vue 组件之间的通信简化机制) 如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 .vuex就是为了解决组件通信问题的. ...
- vue组件之间的通信，父子之间的数据通信
父子组件之间的通信问题既可以传递数据也可以传递变量,父组件传递数据给子组件可以使用props,子组件传递数据给父组件则可以自定义函数来监听子组件的事件发射器. 首先说说组件注册,组件的注册分为全局注册 ...
- vue 组件之间 的通信
组件之间通信: 同级组件之间通信:两个组件定义应用到同一个vue实例之下: <div id="webapp" class="box"> & ...
- vue组件之间的通信， 父子组件通信，兄弟组件通信
组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的. 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <template> < ...
- vue组件之间的通信以及如何在父组件中调用子组件的方法和属性
在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> < ...
- vue组件之间的传值——中央事件总线与跨组件之间的通信（$attrs、$listeners）
vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...
- vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制
前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...
- vue工程利用pubsub-js实现兄弟组件之间的通信
前言 项目是基于vue-cli创建的,不会搭建vue开发环境的同学可以百度,这里不再赘述. 步骤流程 vue项目搭建完成之后的文件图如下: 我的上一篇博客已经详细叙述vue工程中各个文件的作用,不清楚 ...
- Vue组件以及组件之间的通信
一.组件的注册 1. 全局组件注册 1. 注册基本语法Vue.component Vue.component("my_header", { template: `<div&g ...
随机推荐
- 研究windows下SVN备份及还原恢复方案
windows下SVN备份方案 备份策略 svn备份一般采用三种方式: 1)svnadmin dump 2)svnadmin hotcopy 3)svnsync. 注意,svn备份不宜采用普通的 ...
- 深度学习之卷积神经网络(CNN)详解与代码实现（一）
卷积神经网络(CNN)详解与代码实现 本文系作者原创,转载请注明出处:https://www.cnblogs.com/further-further-further/p/10430073.html 目 ...
- 浅谈SQL Server内部运行机制
对于已经很熟悉T-SQL的读者,或者对于较专业的DBA来说,逻辑的增删改查,或者较复杂的SQL语句,都是非常简单的,不存在任何挑战,不值得一提,那么,SQL的哪些方面是他们的挑战 或者软肋呢? 那就是 ...
- 展开隐形的翅膀，WPR003N补完篇
在上一回合要搞刷机!从它的尸体上踏过去!钢板云路由!WPR003N复活!成功启动OPENWRT中,笔者成功的让一个4年前主流芯片搭上OS的快船,留下一段佳话. 今天看着抽屉里的WPR003N,回忆它之 ...
- tomcat 控制台中文乱码问题
1.找到${CATALINA_HOME}/conf/logging.properties2.添加语句:java.util.logging.ConsoleHandler.encoding = GBK 3 ...
- Xamarin 开发Android应用简易教程（1）
最近领导又安排了新的项目需求,只好学习学习如何在.net环境下开发APP(原来没有接触过App开发)! 1.安装VS2017移动应用开发模块. 2.使用VS2017,主要是便利,无需配置环境等一系列麻 ...
- 2015年第六届蓝桥杯javaB组 试题 答案 解析
1.三角形面积 如图1所示.图中的所有小方格面积都是1. 那么,图中的三角形面积应该是多少呢? 请填写三角形的面积.不要填写任何多余内容或说明性文字. ##### 答案 : 28 ### 2.立方 ...
- element表格添加查看操作
表格代码:黄色部分关键代码 首先看效果: <el-table :data="tableData" border height="480" style=&q ...
- Web后端 JAVA学习之路
1.Java分类 Java按应用来分,可以分为J2ME(手机版),J2SE(标准版),J2EE(企业版)三部分. ・J2ME:已经被安卓开发取代. ・J2SE:Java的核心类,其中包括桌面应用,但一 ...
- IGP和BGP路由协议配合降低非核心路由器的路由容量的实验与总结
IGP和BGP路由协议配合降低非核心路由器的路由容量的实验与总结 一.结论 通过eBGP协议,可以显著降低对非核心路由器的路由容量要求,因为核心路由器的数量明显少于非核心路由器,所以,通过此措施既可以 ...