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 ...
随机推荐
- Python：fake-useragent 伪装请求头
写爬虫的时候,在进行 request 请求的时候,多数情况下需要添加请求头,否则就不能正常请求. 添加请求头最常用的做法是修改 User-Agent 来伪装浏览器. 以前在写请求头的时候,都是通过 c ...
- js 实现 复制 功能 (zeroclipboard)
#复制功能因访问权限和安全问题, 被浏览器禁了# 我要实现的功能:点击复制按钮,复制浏览器的当前页面地址,加上用户选择的参数(用户查找过滤),直接将该链接发给别人,点击打开就是对应的查找结果而不是默认 ...
- 一次node-sass安装记录
node-sass的版本是3.9.3 Please restart this script from an administrative PowerShell! 在当前powershell中执行下命令 ...
- C#创建IIS站点及相应的应用程序池，支持IIS6.0+Windows Server 2003. 使用Builder设计模式
测试项目结构: PS:IIS6UtilsBuilder, IIS7UtilsBuilder,IISUtilsBuilder以及IISDirector为Builder设计模式实现的核心代码.Progra ...
- vs2015安装编辑神器：resharper10.0
在平时的开发工作中,作为一名程序员,难免会想办法找到适合自己的开发编辑器.这款插件来自JetBrains公司.接下来就来教大家如何对这款软件进行安装与破解. 1:首先下载与安装.如果没有找到适合的资源 ...
- SSM框架使用
现在的主流框架有SSH和SSM. SSM:SpringMVC(controller)+Spring(管理各组件)+Mybaits SSH:Struct2(controller)+Spring(管理各组 ...
- 自己实现的typeOf函数1
自己实现的typeOf函数:返回传入参数的类型 主要用于解决,js自带的typeof返回结果不精确:Ext JS中typeOf对字符串对象.元素节点.文本节点.空白文本节点判断并不准确的问题 js代码 ...
- Android为TV端助力 外挂字幕（设置颜色，大小，位置，微调字幕）
前提摘要: 可以给电影加字幕,目前支持srt和ass格式, 功能摘要: 支持微调字幕,设置大小,颜色,位置 1 .字幕解析类 package com.hhzt.iptv.lvb_x.utils; ...
- <3>Centos系统完整安装python流程
一.环境 系统:Centos7 Python:3.6.5 自带pip.setuptools 二.命令 介绍:因为yum是依赖于python2,所以千万别删除自带的python2,下面的方法就是py2 ...
- Vue源码实现
链接1:https://www.cnblogs.com/tiedaweishao/p/8933153.html 链接2:https://www.cnblogs.com/erbingbing/p/647 ...