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 框架,简单易上手不说,教程详尽 ...
随机推荐
- jenkins 构建时显示git分支插件、显示构建分支插件
参数化构建分支 1.安装插件:Git Parameter 2.找到我们在Jenkins中建立的工程,勾选“参数化构建过程”,并如下配置 3.在“源码管理”中如下配置 Jenkins构建完显示构建用户和 ...
- Codeforces 980 并查集/模拟贪心最小字典序 找规律/数去除完全平方因子 逆思维倍增预处理祖先标记点
A /*Huyyt*/ #include<bits/stdc++.h> #define mem(a,b) memset(a,b,sizeof(a)) #define pb push_bac ...
- Django学习系列2：django环境中安装selenium并查看selenium版本号
在Django环境中安装selenium (django) root@ranxf-TEST:/studydisk/Python_web_TDD/superlists# conda install se ...
- 数据库管理哪家强？Devart VS Navicat 360°全方位对比解析
今天小编向大家推荐的是两个开发环节的主流数据库管理品牌,那么你知道这两款数据库管理软件品牌与数据库引擎配套的管理软件有什么区别吗?小编这就360°全方位为您解答: ★ 品牌介绍 Devart:拥有超过 ...
- 第三篇：解析库之re、beautifulsoup、pyquery
BeatifulSoup模块 一.介绍 Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式.Be ...
- ZROI 19.08.11模拟赛
传送门 写在前面:为了保护正睿题目版权,这里不放题面,只写题解. dlstql,wsl A \(10pts:\) \(a=100,T=100\),对每个排列构造一个反的,一步到位即可. \(20pts ...
- java——AtomicInteger 中 incrementAndGet与getAndIncrement 两个方法的区别
https://blog.csdn.net/chenkaibsw/article/details/81031950 源码: getAndIncrement: public final int getA ...
- 【leetcode】Monotone Increasing Digits
Given a non-negative integer N, find the largest number that is less than or equal to N with monoton ...
- vue使用 router-link 时点击不能跳转问题
本来一直都是使用<router-link to='/CouplePackage'>产品</router-link>这样的静态方法, 但是突然今天发现这个方法好像有点问题,在某些 ...
- k8s-dashboard搭建
一,简单搭建,未使用ssl证书,可载谷歌浏览器访问 1,拉取镜像 docker pull gcrxio/kubernetes-dashboard-amd64:v1.10.1 docker tag gc ...