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 ...
随机推荐
- 10分钟明白对偶建模法 / +Leampms的“主模型建模”和“对偶模型建模” 之 —— 三类最短路径问题
摘要 对偶模型建模是非常有独特的一种建模方式 —— 当问题本身要求指标极小的情况下,对偶模型表现为求极大.本文给出三种最短路径问题的线性规划/混合整数规划模型,其中的第三类最短路径问题采用对偶建模方法 ...
- Concat
.net 对List使用Concat newlist=list.Concat(list2).ToList() JS的Concat则不用ToList(),一样要用个值去接 Concat返回是一个新数组, ...
- Ajax常见面试题
1,什么是ajax? 为什么要使用ajax? 1.ajax是"asynchornous javascript and xml "的缩写,指一种创建交互式网页应用的网页开发技术. 2 ...
- 基于Xamarin Android实现的简单的浏览器
最近做了一个Android浏览器,当然功能比较简单,主要实现了自己想要的一些功能……现在有好多浏览器为什么还要自己写?当你使用的时候总有那么一些地方不如意,于是就想自己写一个. 开发环境:Xamari ...
- Vue2.0 --- vue-cli脚手架中全局引入JQ
第一步:安装jQuery npm/cmpn方式安装(默认安装1.7.X版本的JQ) npm/cnpm install jQuery 如果想安装更高版本的JQ那么可以选择在package.json文件下 ...
- Django项目结构介绍
官网下载网址:https://www.djangoproject.com/download/ 安装(安装最新LTS版): pip3 install django==2.0.7 创建一个django项目 ...
- [20190423]那个更快的疑问3.txt
[20190423]那个更快的疑问3.txt --//前一阵子,做了11g在单表单条记录唯一索引扫描的测试,摘要如下:--//参考链接:http://blog.itpub.net/267265/vie ...
- MVC 伪静态路由、MVC路由配置，实现伪静态。
前段时间,研究了一下mvc路由配置伪静态,在网上扒了很多最后还是行不通,所以我现在把这些心得整理出来,供大家分享: 1.mvc中默认路由配置是:http://localhost:24409/Home/ ...
- 运算符和Scanner的使用
一 1.运算符:对常量或者变量进行操作的符号 2.算术运算符: 1)四则运算:+ - * / 2)取模运算:%(只看余数) 3)字符串连接:任何数据类型和字符串连在一起,都是字符串结果(+来连接) 4 ...
- CQOI2019(十二省联考)游记
CQOI2019(十二省联考)游记 Day -? 自从联赛爆炸,\(THUWC\)爆炸,\(WC\)爆炸(就没有不爆炸的)之后我已经无所畏惧... 听说是考\(4.5 h\)吗? Day -1 \(Z ...