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 ...
随机推荐
- 让ASP.NET Core支持GraphQL之-GraphQL的实现原理
众所周知RESTful API是目前最流行的软件架构风格之一,它主要用于客户端和服务器交互类的软件.基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制. RESTful的优越性是毋庸置疑 ...
- 爸爸又给Spring MVC生了个弟弟叫Spring WebFlux
情景引入 很早之前,Java就火起来了,是因为它善于开发和处理网络方面的应用. Java有一个爱好,就是喜欢制定规范标准,但自己又不善于去实现. 反倒是一些服务提供商使用它的规范标准来制造应用服务器而 ...
- 搞懂Redis到底快在哪里
前言 Redis是一种基于键值对(Key-Value)的NoSQL数据库,Redis的Value可以由String,hash,list,set,zset,Bitmaps,HyperLogLog等多种数 ...
- 树莓派linux系统连接windows7系统中的共享文件夹的正确姿势
一.要想使用树莓派linux成功访问win7的共享文件夹而不报错,最重要的事情是要正确设置win7中共享文件的设置. 1.需要共享文件点击右键→属性 2.共享选项卡→网络和共享中心 3.点开公用下拉菜 ...
- 网页三剑客：HTML+CSS+JavaScript 之JavaScript
JavaScript 简介 JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器.PC.笔记本电脑.平板电脑和智能手机等设备. JavaScrip ...
- C# 利用键值对取代Switch...Case语句
swich....case 条件分支多了之后,会严重的破坏程序的美观性. 比如这个 上述代码是用于两个进程之间通信的代码,由于通信的枚举特别的多,所以case的分支特别的多.导致了代码的可读性,可维护 ...
- kotlin 第一个Android项目
一.创建过程 二.TextView点击事件 class MainActivity : AppCompatActivity() { lateinit var tv:TextView; //初始化Text ...
- Golang学习：sublime text3配置golang环境
最近导师让学习golang, 然后我就找了些有关golang的学习视频和网站. 昨天在电脑上下载了go tools, 之后在sublime上配置了golang的运行环境.By the way, 我的电 ...
- shell脚本-正则、grep、sed、awk
----------------------------------------正则---------------------------------------- 基础正则 ^word ##搜索以w ...
- SSIS中xml的输入输出
输出为XML的两种方法 1.用数据流, 将平面文件作为DES输出 在SQL里将要输出的数据查询成为单列的字符串: SELECT (SELECT * FROM A FOR XML ROOT('A'),E ...