vue2.0 父子组件之间的通信问题
概要:
父组件向子组件通信:props属性
子组件向父组件通信:$emit()触发事件,$on()监听事件
在 vue 1.0 中可以使用$dispatch 和 $broadcast来实现 向上派发事件 和 向下广播事件;
事件 |
说明 |
$on(事件名) |
事件名的类型是字符串(下同),调用它可以通过this.$on()来调用; |
$emit(事件名, 参数) |
用于触发事件,参数是用于传递给事件的参数。这个用于触发同级事件(当前组件的) |
$dispatch(事件名, 参数) |
①向上派发事件,用于向父组件传播。 ②会首先触发当前组件的同名事件(如果有); ③然后会向上冒泡,当遇到第一个符合的父组件的事件后触发并停止; ④当父组件的事件的返回值设为true会继续冒泡去找下一个。 |
$broadcast(事件名, 参数) |
①向下广播事件,用于向所有子组件传播。 ②默认情况是仅限子组件; ③子组件事件的返回值是true,才会继续向该子组件的孙组件派发; ④不会触发自身同名事件; |
但是在vue 2.0 已将将该方法迁移了,因为基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会变得越来越脆弱。这种事件方式确实不太好,我们也不希望在以后让开发者们太痛苦。并且$dispatch和 $broadcast也没有解决兄弟组件间的通信问题。$dispatch和 $broadcast已经被弃用。请使用更多简明清晰的组件间通信和更好的状态管理方案,如:Vuex.
父组件向子组件通信
功能实现:点击click按钮拿到父组件传递过来的属性值,console.log在控制台
建立一个子组件:componentA.vue 内部代码如下:
<template>
<button @click="onClick">clickMe</button>
</template>
<script>
export default{
props:["msgfromfather"],
methods:{
onClick:function(){
console.log(this.msgfromfather)
}
}
}
</script>
App.vue代码如下:
<template>
<div id="app">
<component-a msgfromfather="you die!"></component-a>
</div>
</template>
<script>
import componentA from './components/componenta'
export default {
name: 'app',
data:function(){
return {
childwords:''
}
},
components: {
componentA
},
methods:{
listenToMyBoy:function(msg){
this.childwords = msg
}
}
}
</script> <style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
子组件向父组件通信
功能实现:点击按钮,在上方页面区域打出从子组件传递过来的 msg 参数
componentA.vue 内部代码如下:
<template>
<button @click="onClick">clickMe</button>
</template> <script>
export default{
data:function(){
return {
msg:'hello componenta'
}
},
props:["msgfromfather"],
methods:{
onClick:function(){
console.log(this.msgfromfather)
this.$emit('child-tell-me-sth',this.msg)
}
}
}
</script>
App.vue代码如下:
<template>
<div id="app">
<p>child tell me: {{ childwords }}</p>
<component-a msgfromfather="you die!"
@child-tell-me-sth="listenToMyBoy"
></component-a>
</div>
</template> <script>
import componentA from './components/componenta' export default {
name: 'app',
data:function(){
return {
childwords:''
}
},
components: {
componentA
},
methods:{
listenToMyBoy:function(msg){
this.childwords = msg
}
}
}
</script> <style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
在子组件向父组件通信借助了vue2.0中的 $emit() ,子组件在click事件里面:this.$emit('child-tell-me-sth',this.msg),传递了事件名称 "child-tell-me-sth" 和参数 "this.msg" 给父组件,在父组件中打印出来
vue2.0 父子组件之间的通信问题的更多相关文章
- vue2.0父子组件之间通信
父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...
- Vue2.0父子组件之间和兄弟组件之间的数据交互
熟悉了Vue.js的同级组件之间通信,写此文章,以便记录. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述. 使用NPM及相关命令行工具初始化的Vue工程,目录结 ...
- Vue2.0父子组件之间的双向数据绑定问题解决方案
对于vue 1.0项目代码,如果把vue换成vue 2.0,那么之后项目代码就完全奔溃不能运行,vue 2.0在父子组件数据绑定的变化(不再支持双向绑定)颠覆了1.0的约定,很遗憾. 解决方案只有两种 ...
- vue2.0嵌套组件之间的通信($refs,props,$emit)
vue的一大特色就是组件化,所以组件之间的数据交互是非常重要,而我们经常使用组件之间的通信的方法有:props,$refs和emit. 初识组件之间的通信的属性和方法 props的使用 子组件使用父组 ...
- vue2.0父子组件以及非父子组件通信传参详解
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
- vue2.0父子组件以及非父子组件如何通信
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
- React 学习(六) ---- 父子组件之间的通信
当有多个组件需要共享状态的时候,这就需要把状态放到这些组件共有的父组件中,相应地,这些组件就变成了子组件,从而涉及到父子组件之间的通信.父组件通过props 给子组件传递数据,子组件则是通过调用父组件 ...
- 【转】vue父子组件之间的通信
vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...
- vue2.0父子组件通信的方法
vue2.0组件通信方法:props传值和emit监听.(.sync方法已经移除.详情请点击)(dispatch-和-broadcast方法也已经废弃) props方法传值:Props 现在只能单项传 ...
随机推荐
- 数据绑定-集合List绑定
users.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- bzoj 4237 稻 草 人
bzoj 这个矩形有三个限制,分别是右上角点的横纵坐标分别大于左下角废话,并且中间区域没有点.那么可以先按横坐标排序,然后枚举左边的点和右边的点匹配.为了保证复杂度,这里每次把点集一分为二,先递归处理 ...
- sqlalchemy.exc.InternalError: (pymysql.err.InternalError) (1091, "Can't DROP 'users_ibfk_1'; check that column/key exists") [SQL: ALTER TABLE users DROP FOREIGN KEY users_ibfk_1]
flask 迁移数据库报错 报错: sqlalchemy.exc.InternalError: (pymysql.err.InternalError) (1091, "Can't DROP ...
- Oracle DBA 学习总结
对于学习Oracle 数据库,应该先要了解Oracle 的框架.它有物理结构(由控制文件.数据文件.重做日志文件.参数文件.归档文件.密码文件组成) ,逻辑结构(表空间.段.区.块),内存分配( SG ...
- Tensorflowlite移植ARM平台iMX6
一.LINUX环境下操作: 1.安装交叉编译SDK (仅针对该型号:i.MX6,不同芯片需要对应的交叉编译SDK) 编译方法参考:手动编译用于i.MX6系列的交叉编译SDK 2.下载Tensorflo ...
- python-迭代器与生成器3
python-迭代器与生成器3 迭代器可以直接作用于for循环的数据类型有以下几种: 一类是集合数据类型,如list.tuple.dict.set.str等: 一类是generator,包括生成器和带 ...
- c++ easyX的学习
画象棋盘来浅显学习了解easyx 了解象棋盘的构成: 如图就为一个基本的象棋棋盘我们下面就用esayx来画出这个棋盘,我的感觉这个棋盘大概分为两个部分:第一部分就是棋盘的大致布局,第二个就是棋盘的细节 ...
- Python time、datetime、os、random、sys、hashlib、json、shutil、logging、paramiko、subprocess、ConfigParser、xml、shelve模块的使用
文章目录: 1. time & datetime模块 2. os模块 3. random模块 4. sys模块 5. hashlib模块 6. json模块 7. shutil模块 8. lo ...
- CentOS 安装 oralce Java的图形出错: libXtst.so.6: cannot open shared object file: No such file or directory
问题类似: shared object file: No such file or directory occurred..java.lang.UnsatisfiedLinkError: /tmp/O ...
- Java8中重要的收集器Collector
Collector介绍 Java8的stream api能很方便我们对数据进行统计分类等工作,函数式编程的风格让我们方便并且直观地编写统计代码. 例如: Stream<Integer> s ...