父组件--> 子组件

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 组件通信方案的更多相关文章

  1. Vue 非父子组件通信方案

    Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...

  2. Vue组件通信之Bus

    关于组件通信我相信小伙伴们肯定也都很熟悉,就不多说了,对组件通信还不熟悉的小伙伴移步这里. 在vue2.0中 $dispatch 和 $broadcast 已经被弃用.官方文档中给出的解释是: 因为基 ...

  3. vue组件通信的几种方式

    最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child ...

  4. vue 组件通信

    组件 组件之间的数据是单向绑定的. 父组件向子组件通信 是通过子组件定义的props属性来实现.通过props定义变量与变量类型和验证方式. props简化定义 在简化定义中,变量是以数组的方式定义. ...

  5. VUE 组件通信总结

    1.prop 父组件传递给子组件,即通过VUE本身具有的Props属性来传递值 Child组件 <template> <span>{{message}}</span> ...

  6. vue组件通信那些事儿

    一.说说通信 通信,简言之,交流信息.交流结束后,把信息放在哪里,这是一个值得思考的问题.vue中保存状态有2种方式,组件内的data属性和组件外的vuex的state属性. 1.用state的场景 ...

  7. vue组件通信&&v兄弟组件通信eventbus遇到的问题(多次触发、第一次不触发)

    组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的 (vuex以后再说). 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <templ ...

  8. vue 组件通信传值

    父子组件通信: 子组件 <template> <div> <h3 @click="alerrt"> 我是子组件一</h3> < ...

  9. Vue组件通信的几种方法

    上一节说到,vue.js是允许子组件通过props接受父组件的信息,但是不允许父组件通过props接受子组件的信息 1. $emit()和on 当子组件需要向父组件传递数据时,就要用到自定义事件. 使 ...

随机推荐

  1. 带标签的for循环

    for循环可以加标签,使用break或者continue时,若存在多层嵌套循环可指定标签的for循环 public class ForLabel { public static void main(S ...

  2. (Opencv02)图片展示

    (Opencv02)图片展示 在程序里我们怎么把图片显示出来呢? 这里需要记一个自定义函数就好啦!  def cv_show(name, img):     cv2.imshow(name, img) ...

  3. Vue2中父子组件通信的几种常用方法

    源码地址 点击查看演示源码 Vue2父子传参:props 首先在父组件中引入子组件,然后以属性的方式将数据传递给子组件 父组件: <template> <div class=&quo ...

  4. pwnable.kr之unlink

    pwnable.kr之unlink 之前在看别的东西,学习的随笔也没有写完......颓了几天. 由于最近在看堆,就把pwnable.kr上unlink这道题做一下,学习一下. 1.程序分析 #inc ...

  5. springboot上传文件路径存放

    @Beanpublic EmbeddedServletContainerCustomizer embeddedServletContainerCustomizer() { return (Config ...

  6. 如何在idea中配置Tomcat服务器

    .IDEA 中动态 web 工程的操作         a)IDEA 中如何创建动态 web 工程        1.创建一个新模块: 2.选择你要创建什么类型的模块 3.输入你的模块名,点击[Fin ...

  7. Blazor 模板化组件开发指南

    翻译自 Waqas Anwar 2021年4月15日的文章 <A Developer's Guide To Blazor Templated Components> [1] 在我之前的一篇 ...

  8. 零基础学Java之Java学习笔记(四):运算符

    ​ 算术运算符: 算术运算符是对数值类型的变量进行运算的,在 Java 程序中使用的非常多. 运算符 说明 例子 结果 + 加法-相加运算符两侧的值 9+9 18 - 减法-左操作数减去右操作数 10 ...

  9. 树莓派远程连接工具SSH使用教程

    树莓派远程连接工具SSH使用教程 树莓派 背景故事 树莓派作为一款迷你小主机,大部分的使用场景都会用到远程调试,远程调试用到最多的方式一般就是VNC和SSH,SSH就是命令行型的远程方式,简单来说就是 ...

  10. Android 11(R) Power HAL AIDL简析 -- 基本接口

    Android 11(R) Power HAL AIDL将分三篇文章来介绍: Android 11(R) Power HAL AIDL简析 -- 基本接口 Android 11(R) Power HA ...