Vue 组件通信方案
父组件--> 子组件
1. 属性设置
父组件关键代码如下:
<template>
<Child :child-msg="msg"></Child>
</template>
子组件关键代码如下:
export default {
name: 'child',
props: {
childMsg: 'data'
}
};
child-msg 为父组件给子组件设置的额外属性值,属性值需在子组件中设置props,子组件中可直接使用child-msg变量。
2. 子组件调用父组件
子组件通过 $parent 获得父组件,通过 $root 获得最上层的组件。
子组件--> 父组件
1. 发送事件/监听事件
子组件中某函数内发送事件:
this.$emit('toParentEvent', 'data');
父组件监听事件:
<Child :msg="msg" @toParentEvent="todo"></Child>
toParentEvent为子组件自定义发送事件名称,父组件中@toParentEvent为监听事件,todo为父组件处理方法。
2. 父组件直接获取子组件属性或方法
给要调用的子组件起个名字。将名字设置为子组件 ref 属性的值。
<!-- 子组件。 ref的值是组件引用的名称 -->
<child-component ref="aName"></child-component>
父组件中通过 $refs.组件名 来获得子组件,也就可以调用子组件的属性和方法了。
var child = this.$refs.aName
child.attr
child.methods()
父组件通过 $children 可以获得所有直接子组件(父组件的子组件的子组件不是直接子组件)。需要注意 $children 并不保证顺序,也不是响应式的。
Bus中央通信
目前中央通信是解决兄弟间通信,祖父祖孙间通信的最佳方法,不仅限于此,也可以解决父组件子组件间的相互通信。如下图:
各组件可自己定义好组件内接收外部组件的消息事件即可,不用理会是哪个组件发过来;而对于发送事件的组件,亦不用理会这个事件到底怎么发送给我需要发送的组件。
先设置Bus
//bus.js
import Vue from 'vue'
export default new Vue();
组件内监听事件:
import bus from '@/bus'; export default {
name: 'childa',
methods: {
},
created() {
bus.$on('child-message', function(data) {
console.log('I get it');
});
}
};
发送事件的组件:
import bus from '@/bus';
//方法内执行下面动作
bus.$emit('child-message', this.data);
Vue 组件通信方案的更多相关文章
- Vue 非父子组件通信方案
Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...
- Vue组件通信之Bus
关于组件通信我相信小伙伴们肯定也都很熟悉,就不多说了,对组件通信还不熟悉的小伙伴移步这里. 在vue2.0中 $dispatch 和 $broadcast 已经被弃用.官方文档中给出的解释是: 因为基 ...
- vue组件通信的几种方式
最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child ...
- vue 组件通信
组件 组件之间的数据是单向绑定的. 父组件向子组件通信 是通过子组件定义的props属性来实现.通过props定义变量与变量类型和验证方式. props简化定义 在简化定义中,变量是以数组的方式定义. ...
- VUE 组件通信总结
1.prop 父组件传递给子组件,即通过VUE本身具有的Props属性来传递值 Child组件 <template> <span>{{message}}</span> ...
- vue组件通信那些事儿
一.说说通信 通信,简言之,交流信息.交流结束后,把信息放在哪里,这是一个值得思考的问题.vue中保存状态有2种方式,组件内的data属性和组件外的vuex的state属性. 1.用state的场景 ...
- vue组件通信&&v兄弟组件通信eventbus遇到的问题(多次触发、第一次不触发)
组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的 (vuex以后再说). 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <templ ...
- vue 组件通信传值
父子组件通信: 子组件 <template> <div> <h3 @click="alerrt"> 我是子组件一</h3> < ...
- Vue组件通信的几种方法
上一节说到,vue.js是允许子组件通过props接受父组件的信息,但是不允许父组件通过props接受子组件的信息 1. $emit()和on 当子组件需要向父组件传递数据时,就要用到自定义事件. 使 ...
随机推荐
- 带标签的for循环
for循环可以加标签,使用break或者continue时,若存在多层嵌套循环可指定标签的for循环 public class ForLabel { public static void main(S ...
- (Opencv02)图片展示
(Opencv02)图片展示 在程序里我们怎么把图片显示出来呢? 这里需要记一个自定义函数就好啦! def cv_show(name, img): cv2.imshow(name, img) ...
- Vue2中父子组件通信的几种常用方法
源码地址 点击查看演示源码 Vue2父子传参:props 首先在父组件中引入子组件,然后以属性的方式将数据传递给子组件 父组件: <template> <div class=&quo ...
- pwnable.kr之unlink
pwnable.kr之unlink 之前在看别的东西,学习的随笔也没有写完......颓了几天. 由于最近在看堆,就把pwnable.kr上unlink这道题做一下,学习一下. 1.程序分析 #inc ...
- springboot上传文件路径存放
@Beanpublic EmbeddedServletContainerCustomizer embeddedServletContainerCustomizer() { return (Config ...
- 如何在idea中配置Tomcat服务器
.IDEA 中动态 web 工程的操作 a)IDEA 中如何创建动态 web 工程 1.创建一个新模块: 2.选择你要创建什么类型的模块 3.输入你的模块名,点击[Fin ...
- Blazor 模板化组件开发指南
翻译自 Waqas Anwar 2021年4月15日的文章 <A Developer's Guide To Blazor Templated Components> [1] 在我之前的一篇 ...
- 零基础学Java之Java学习笔记(四):运算符
算术运算符: 算术运算符是对数值类型的变量进行运算的,在 Java 程序中使用的非常多. 运算符 说明 例子 结果 + 加法-相加运算符两侧的值 9+9 18 - 减法-左操作数减去右操作数 10 ...
- 树莓派远程连接工具SSH使用教程
树莓派远程连接工具SSH使用教程 树莓派 背景故事 树莓派作为一款迷你小主机,大部分的使用场景都会用到远程调试,远程调试用到最多的方式一般就是VNC和SSH,SSH就是命令行型的远程方式,简单来说就是 ...
- Android 11(R) Power HAL AIDL简析 -- 基本接口
Android 11(R) Power HAL AIDL将分三篇文章来介绍: Android 11(R) Power HAL AIDL简析 -- 基本接口 Android 11(R) Power HA ...