vue组件之间通信总结---点赞
总结：
父组件--》子组件
①通过属性
步骤1：
<son myName="michael" myPhone='123'></son>
<son :myName="userList[0]"></son>
步骤2：
Vue.component('son',{
props:['myName','myPhone']
})
②通过$parent
直接在子组件中通过this.$parent得到调用子组件的父组件
子组件--》父组件
①events up
步骤1：在父组件中 调用子组件的时候 绑定一个自定义事件 和 对应的处理函数
methods:{
recvMsg:function(msg){
//msg就是传递来的数据
}
}，
template:'
<son @customEvent="recvMsg"></son>
'
步骤2：在子组件中 把要发送的数据通过触发自定义事件传递给父组件
this.$emit('customEvent',123)
②$refs
reference 引用
步骤1：在调用子组件的时候 可以指定ref属性
<son ref='zhangsan'></son>
步骤2：通过$refs得到指定引用名称对应的组件实例
this.$refs.zhangsan
兄弟组件通信
步骤1：创建一个Vue的实例 作为事件绑定触发的公共的对象
var bus = new Vue();
步骤2：在接收方的组件 绑定 自定义的事件
bus.$on('customEvent',function(msg){
//msg是通过事件传递来的数据 (传递来的123)
});
步骤3：在发送方的组件 触发 自定义的事件
bus.$emit('customEvent',123);
每日一练：
创建2个组件，main-component,son-component
视图：
main-component 显示一个按钮
son-component 显示一个p标签
功能：
main-component 定义一个变量count,初始化为0，将count传递给son-component,son-component接收到数据显示在p标签中
main-component 在点击按钮时，实现对count的自增操作，要求son-component能够实时显示count对应的数据
son-component在接收到count之后，在count大于10的时候，将main-component的按钮禁用掉
（参考：<button v-bind:disabled="!isValid">clickMe</button>）
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>小练习</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<main-component></main-component> </div>
<script>
/*
每日一练： 创建2个组件，main-component,son-component 视图：
main-component 显示一个按钮
son-component 显示一个p标签 功能：
main-component 定义一个变量count,初始化为0，将count传递给son-component,son-component接收到数据显示在p标签中 main-component 在点击按钮时，实现对count的自增操作，要求son-component能够实时显示count对应的数据 son-component在接收到count之后，在count大于10的时候，将main-component的按钮禁用掉
（参考：<button v-bind:disabled="!isValid">clickMe</button>）
*/
//创建父组件
Vue.component("main-component",{
data:function(){
return {
count:0,
isDisabled:true
}
},
methods:{
//点击按钮对count进行自增
//并通过$emit触发countAdd,并把count的值传递给子组件
//判断count==10的时候让按钮禁用
countAdd:function(){
this.count++;
console.log("对数据进行自增："+this.count);
this.$emit("countAdd",this.count);
}
},
template:`
<div>
<button @click="countAdd" v-bind:disabled="!isDisabled">点我</button>
<son-component v-bind:myCount="count"></son-component>
</div>
`
})
//创建子组件
Vue.component("son-component",{
//通过props接收父组件传递过来的值
props:["myCount"],
template:`
<div>
<p>{{myCount}}</p>
</div>
`,
//数据更新完成后判断从父组件拿到的值
updated:function(){
if(this.myCount>10){
//子组件通过$parent直接获取父组件的数据
this.$parent.isDisabled = false;
}
}
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>
vue组件之间通信总结---点赞的更多相关文章
- 前端面试 vue 部分 (5)——VUE组件之间通信的方式有哪些
VUE组件之间通信的方式有哪些(SSS) 常见使用场景可以分为三类: 父子通信: null 父向子传递数据是通过 props ,子向父是通过 $emit / $on $emit / $bus Vuex ...
- Vue 组件之间通信 All in One
Vue 组件之间通信 All in One 组件间通信 1. 父子组件之间通信 https://stackblitz.com/edit/vue-parent-child-commutation?fil ...
- vue组件之间通信传值
原文链接:https://blog.csdn.net/lander_xiong/article/details/79018737 我认为这位博主的这篇文章写的非常详细,通俗易懂, 我们这次的vue项目 ...
- vue组件之间通信总结(超详细)
组件通信在我们平时开发过程中,特别是在vue和在react中,有着举足轻重的地位.本篇将总结在vue中,组件之间通信的几种方式: props.$emit $parent.$children $attr ...
- Vue组件之间通信的三种方式
最近在看梁颠编著的<Vue.js实战>一书,感觉颇有收获,特此记录一些比价实用的技巧. 组件是MVVM框架的核心设计思想,将各功能点组件化更利于我们在项目中复用,这类似于我们服务端面向对象 ...
- vue组件之间通信的8种方式
对于vue来说,组件之间的消息传递是非常重要的,下面是我对组件之间消息传递的常用方式的总结. props和$emit(常用) $attrs和$listeners 中央事件总线(非父子组件间通信) v- ...
- Vue组件之间通信
vue组件传值有以下几种情况: 父组件向子组件传值.子组件向父组件传值.兄弟组件之间传值等 一.父组件向子组件传值: 传值方式: props <father> // 动态传递值 <s ...
- vue 组件之间通信
父传子 **父组件代码** <template> <header-box :title-txt="showTitleTxt"></header-box ...
- 【Vue课堂】Vue.js 父子组件之间通信的十种方式
这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...
随机推荐
- JQuery 时间戳转时间
JQuery 时间戳转时间 var date = new Date(stocks[i]['create_time'] * 1000); var y = date.getFullYear(); var ...
- 深入理解JAVA虚拟机 高效并发
处理器和缓存 由于计算机的存储设备与处理器的运算速度之间有着几个数量级的差距,所以现代计算机系统都不得不加入一层读写速度尽可能接近处理器运算速度的高速缓存来作为内存与处理之间的缓冲:将运算需要使用的数 ...
- Java基本的程序结构设计 数组
声明数组: int[] a; int a[]; 两种方式.一般选择第一种,比较一目了然. 初始化,必须指定长度: int[] a = new int[10]; int[] a = {1,2,3}; 初 ...
- Nginx 502 Bad Gateway 的错误的解决方案
我用的是nginx反向代理Apache,直接用Apache不会有任何问题,加上nginx就会有部分ajax请求502的错误,下面是我收集到的解决方案. 一.fastcgi缓冲区设置过小 出现错误,首先 ...
- 判断一个对象是否为空？ js
其实开发过程中常常会遇到判断对象和数组是否为空?下面介绍3种判断对象是否为空 1. 最常见的思路,for...in...遍历属性,为真则为“非空数组”:否则为“空数组” function judgeO ...
- R语言-六大数据结构
R语言有六种基本的数据结构(或者说数据类型吧).根据数据的维度和同质/异质可分为5种数据类型,最后再介绍一种特殊的类型“因子”. 同质 异质 1维 原子向量 列表 2维 矩阵 数据框 n维 数组 ...
- fail2ban CentOS7安装
一.安装1.安装yum install shorewall gamin-python shorewall-shell shorewall-perl shorewall-common python-in ...
- .NET DotnetSpider--WebDrvierSpider(ajax动态加载的数据获取)
爬虫获取数据时,可能会遇到AJAX加载的页面,如果无法分析出接口的话,就只能使用秘密武器——WebDriverDownloader.不过最好还是分析出接口为好,WebDriver的性能实在是太低了.现 ...
- postman—创建collection，执行collection和批量执行
接口测试中,可以在 Postman 逐个创建请求.但当请求逐渐增多时,如果我们不采取任何措施管理,散乱的请求维护起来就比较麻烦了.这个时候我们可以创建测试集 Collection 来对这些请求进行管理 ...
- MySQL教程-MyISAM和InnoDB的区别
MySQL的表类型MyISAM和InnoDB之间的最大区别是,InnoDB的支持事务.兄弟连教育( )来给大家做个对比: InnoDB支持一些新的功能:交易,行级锁,外键 InnoDB是高容量,高性能 ...