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 框架,简单易上手不说,教程详尽 ...
随机推荐
- MapReduce计数程序（自主复习）
1.MyWordCount类 注意: 1.本机+测试,两个注释都放开 2.本机跑集群,要开异构平台为true 3.集群跑,把两个注释都注起来,然后在集群上面跑 package com.littlepa ...
- 最简单的Android项目（添加jar文件）
如果项目需要引用第三方jar文件,需要对编译命令做一些改动. 首先在项目根目录创建libs目录,将需要的jar文件拷贝到里面. 编译过程中有两步需要改动. 编译java源文件时,需要添加class p ...
- python核心编程正则表达式练习题1-2匹配由单个空格分隔的任意单词对，也就是性和名
# 匹配由单个空格分隔的任意单词对,也就是姓和名 import re patt = '[A-Za-z]+ [A-Za-z]+' # 方法一 +加号操作符匹配它左边的正则表达式至少出现一次的情况 # p ...
- angularjs 代码结构两种写法
1.当路由中不写controller的时候,controller写在对应的html表单中 2.若要写在路由中,如下 3.转到相应的路由(页面) 1.采用location服务 2.采用 transiti ...
- Python之网路编程进程理论基础
背景知识 顾名思义,进程即一个软件正在进行的过程.进程是对正在运行程序的一个抽象. 进程的概念起源于操作系统,是操作系统最核心的概念,也是操作系统提供的最古老的也是最重要的抽象概念之一.操作系统的其他 ...
- numpy模块、matplotlib模块、pandas模块
目录 1. numpy模块 2. matplotlib模块 3. pandas模块 1. numpy模块 numpy模块的作用 用来做数据分析,对numpy数组(既有行又有列)--矩阵进行科学计算 实 ...
- mysql的一些方法
线程: isLive(); 测试线程是否处于活动状态. long getId() 返回该线程的标识符. String getName() 返回该线程的名称. currentThread(); 返回对当 ...
- iOS自定义键盘的简单实现
自定义键盘类VolumeInputKeyboardView: VolumeInputKeyboardView.h文件: #import <UIKit/UIKit.h> NS_ASSUME_ ...
- electron-vue 更新 使用electron-update的版本
electron-vue使用的electron版本比较老,用最新的electron-update会报错 我用这个版本成功 "electron-updater": "^3. ...
- vue中为computed计算属性传参遇到的问题，已解决
首先介绍下项目背景, 需要将 dataList 中的 item.stars 属性传入 computed 返回要展示的值 部分代码如下(请不要纠结为什么这么做,数据格式确认如此): <li cla ...