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 框架,简单易上手不说,教程详尽 ...
随机推荐
- Linux20期学习笔记 Day2
Linux系统进程状态及部分基础命令
- juniper 命令
show chassis hardware 查看系统硬件配置,fpc表示板卡,pic表示板卡中的槽位,xcvr表示板卡中的槽位的端口位置 show chassis envirmonent 查看系统运行 ...
- dataTable 、dataView、Dataset 区别
dataTable .dataView.Dataset 区别的经典回答 1.DataView是DataTable的表示,DataTable表里的记录是没有顺序的,但显示可以有不同顺序(DataVIew ...
- libpng Cximage图片处理
跨平台 开源 png图片处理 https://www.cnblogs.com/lidabo/p/6923426.html Cximage BIPro
- 隐马尔可夫模型的前向算法(java实现)，今天奉上
隐马尔可夫模型的前向算法(手动实现),今天奉上,由于研究生期间,实现的时候没有多加注释,这里为了让更好的人进入自然语言处理领域,特此,将前向算法奉上,具体公式可参考52nlp的HMN系列博客. 参考了 ...
- 【学习】026 Zookeeper
什么Zookeeper Zookeeper是一个分布式开源框架,提供了协调分布式应用的基本服务,它向外部应用暴露一组通用服务——分布式同步(Distributed Synchronization).命 ...
- Ubuntu 16.04 编译ORB_SLAM2_modified
编译g2o_with_orbslam2 1.修改g2o/types/slam2d/edge_se2_pointxy_bearing.cpp t.setRotation(t.rotation().ang ...
- 【洛谷P2894】Hotel 线段树+二分查询
题目大意:给定一个长度为 N 的序列,每个点有两种状态 1/0,表示占有和空闲,现支持 first-fit 查询是否有一段连续的长度为 X 的空闲子序列和区间赋值操作. 题解:get到了线段树新技能. ...
- 【洛谷P2292】L语言
题目大意:给定一个长度为 N 的字符串和一个字典,字典中所有的字符串的长度均不超过 10,求给定的字符串从前往后最多有多少位可以与字典匹配. 题解:设 \(dp[i]\) 表示串的前 i 位是否能够与 ...
- 【Luogu5294】[HNOI2019]序列
题目链接 题意 给定一个序列,要求将它改造成一个非降序列,修改一个数的代价为其改变量的平方. 最小化总代价. 另有\(Q\) 次询问,每次修改一个位置上的数.(询问之间独立,互不影响) Sol 神仙 ...