详解Vue组件之间的数据通信实例

2024-04-05 02:04:37

最近在用vue做项目，学习了不少东西，但是有时候光顾着做项目却忘记要找个时间来整理一下最近的一些学习新得，因为是新手，所以可能会有错误的地方，欢迎指出和交流呀~~~

关于父子组件以及非父子组件之间的数据通信

1 父子组件之间数据通信

一般父组件向子组件传递数据用prop进行传递，注意，子组件不能对prop中的数据进行更改，vue中规定是防止子组件对父组件中的数据进行窜改。而子组件向父组件进行数据传递则可以通过事件触发父组件的事件来实现数据的传递。（是不是有点懵逼了，看个例子吧）

（这里我就直接摘取一段项目中的例子代码来说明）

使用prop进行数据传递：

//这是父组件中的部分代码，父组件向子组件<handle-Employee><handle-Employee>传递数据（method,dialogFormvisible）
 // 父组件的部分代码
<!--添加员工模块-->
   <div class="add">
    <el-button type="primary" icon="edit" @click="handleAdd">新增员工</el-button>
    <handle-Employee :method="method"
     :dialogFormVisible="dialogFormVisible" @close="closeDialog" @getEmployee="getEmployee"></handle-Employee>
   </div>
  </div>
// 父组件的script代码
 export default {
  data () {
   return {
    method:{handle： 'add‘, title: '增加员工'}
    dialogFormvisible: false
 }
 }
}

// 子组件中则需要加prop属性数据 ，如下所示：
 export default {
   props: [ 'method', 'dialogFormVisible']
 }

//所以只要父组件中的数据变化修改，子组件中的数据也会跟这修改；

在chrome中用vue-devtool其实也可以看到相关的数据属性；

当然，子组件做完相关操作之后，需要时间的是将属性值dialogFormVisible重新修改为false。若是直接在子组件进行修改的话，就会报错，因为会影响到父组件的数据，vue中规定不能直接对prop的属性值进行修改。那么就可以用事件触发来实现子组件向父组件传递数据了。

///父组件监听子组件的事件，通过@close="closeDialog"和@getEmployee="getEmployee"来实现监听；
一旦子组件中的事件close和getEmployee发生之后，就会触发父组件中的事件closeDialog和getEmployee事件。
// 父组件的部分代码
<div class="add">
  <el-button type="primary" icon="edit" @click="handleAdd">新增员工</el-button>
  <handle-Employee :method="method" :dialogFormVisible="dialogFormVisible" @close="closeDialog" ></handle-Employee>
</div>

//子组件中的事件分发
export default {
methods: {
 // 关闭弹出框
   closeDialog () {
    this.$emit('close', false)  //这里就是直接触发子组件的close事件，一旦这个执行，父组件中的对应方法就会执行。
   }
}
}
// 当那边触发关闭事件的时候，这边的显示值就要关闭，那边会传过来一个false

// 父组件的事件
export default {
methods: {
 // 当那边触发关闭事件的时候，这边的显示值就要关闭，那边会传过来一个false
  closeDialog (val) {
    this.dialogFormVisible = val
   }
}
}

这样就实现了父子组件之间的数据传递；

2 实现非父子组件之间的数据传递

通过建立中间的事件bus总线。实现非父子组件之间的数据通信。

首先建立事件bus，我会新建一个bus.js文件；注册bus。
分别在组件中使用emit和on实现数据之间的通信；

1 bus.js文件

//bus.js，注册Bus
import Vue from 'vue'
export default new Vue()

2 组件emit触发事件

<template>
 <div class="add-task" :class="{'ishide':isAdding}" @click="addtask()">
  <i class="fa fa-plus-circle" aria-hidden="true"></i>
  添加任务
 </div>
</template>
<script>
 import Bus from '@/bus'
 export default {
 methods: {
 props: ['index'],
  data () {
   return {
    isAdding: false
   }
  },
   addtask () {
    this.isAdding = true
    Bus.$emit('adding-task', this.isAdding, this.index) // 这里触发的事件是'adding-task'，
    传递了两个参数，分别是this.isAdding和this.index
    this.$emit('addtask')
   }
  }
 }

3 另外一个组件on接收事件

// 模板中的代码就不展示了。
主要展示的是script中的代码
export default{
data() // 这里的数据也不一一显示啦；
created () {
// 这里使用on监听了adding-task事件，接收到两个参数。所以一旦上面的组件中的adding-task事件触发，这里就会监听到。
   Bus.$on('adding-task', (state, index) => {
    if (this.index === index) {
     this.isShow = state
    }
   })
  }
}

缺点：

有时候小的子组件在页面中有很多个，需要复用，那么为了防止每一次触发相应的事件的时候，都会影响到监听的对应组件，如下图所示。我的解决方案就是给每一个循环的子组件赋值一个index的值；

//这里我会在每一次组件emit的时候传递一个index的值，另外一个组件on之后接受参数，会先判断该index是不是与自己的index相等，如果相等才执行相应的数据改变操作。
 Bus.$on('adding-task', (state, index) => {
    if (this.index === index) {
     this.isShow = state
    }

今天先到这里，困了。还有更复杂的数据通信是用vuex，不过我现在的项目应该是暂时还不会用到，所以以后用到再去深入了解。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Vue组件通信实践记录（推荐）

组件通信几乎所有的mvvm框架中都要涉及组件通信的功能(吐槽一下knockout,毕竟是鼻祖就先不说它了).而且目前的前端形式来看,组件化是一个项目的基础.所以选好一个合适的框架后,随着组件的不断增加,业务的复杂度提升,组件之间的通信变得尤为重要. 实践方法由于更换新的框架,我们的项目由Avalon更新成Vue.但是为了兼容以前的业务代码,不能直接使用vue的标准实践方式,我还是拿过来后封装了一个vue的class,具体业务里面不影响使用,封装的过程之后写出来再聊吧,下面来总结一下最近用到的
Vue 父子组件、组件间通信

本人对Vue组件间通信不懂,搜索了很多关于Vue 父子组件间通信介绍,下面我来记录一下,有需要了解Vue 父子组件.组件间通信的朋友可参考.希望此文章对各位有所帮助. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件</title> <meta name="viewport"
深入探讨Vue.js组件和组件通信

基本是按照官网的 Guide 全部梳理了一遍:http://vuejs.org/guide/index.html 这里我们以一个 Todo List 应用为例来把相关的只是都串起来,这篇里面的全部代码都在github上 https://github.com/lihongxun945/vue-todolist Vue 实例一个 Vue 应用是由一个 root vue instance 引导启动的,而 Vue instance 是这么创建的: var vm = new Vue({ // opti
Vuejs第十篇之vuejs父子组件通信

本篇文章是小编结合官方文档整理的一套更加细致,代码更多更全的教程,非常不错,比较适合新手阅读. 本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html#u7236_u5B50_u7EC4_u4EF6_u901A_u4FE1 父子组件通信 ①访问子组件.父组件.根组件: this.$parent 访问父组件 this.$children 访问子组件(是一个数组) this.$root 根实例的后代访问根实例示例代码: <div id="a
vue组件间通信解析

组件间通信(父子,兄弟) 相关链接\组件通信:点击查看学习链接:Vue.js--60分钟快速入门点击查看分分钟玩转Vue.js组件点击查看父组件传子组件父传子方法(一) 属性传递 props //子组件 <template> <ul> <li v-for="item in dataList">{{item}}</li> </ul> </template> <script> export defa
Vue2.x中的父子组件相互通信的实现方法

业务场景:(这里指的是直接父子级关系的通信) 美女(子组件)将消息发送给大群(父组件) 大群(父组件)收到美女发送的消息后再回个信息给美女(子组件) 父组件 template <template> <div> <p>群消息girl:</p> <div> {{ somebody }} 说: 我 {{ age }} 了. </div> <hr> <v-girl-group :girls="aGirls"
vue2.0父子组件及非父子组件之间的通信方法

1.父组件传递数据给子组件父组件数据如何传递给子组件呢?可以通过props属性来实现父组件: <parent> <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰 </parent> data(){ return { msg: [1,2,3] }; } 子组件通过props来接收数据: 方式1: props: ['childMsg'] 方式2 : props: { childMsg: Arr
详解vue组件通信的三种方式

1. 第一种方式就是官方推荐的官方推荐方式有时候两个组件也需要通信(非父子关系).在简单的场景下,可以使用一个空的 Vue 实例作为中央事件总线. 本质是通过派发事件然后监听事件从而更改值,(父子组件通信也可用这个方式,但是不同的一点就是父子组件通信的时候可以不用一个空的Vue实例来做中转,这种方式我这里就不做演示的了,因为我的题目是非父子通信) 空的Vue实例 bus import Vue from 'vue' const bus = new Vue() export default bu
详解vue2.0组件通信各种情况总结与实例分析

Props在vue组件中各种角色总结在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用props传递数据---组件内部 //html <div id="app1"> <i>注意命名规定:仅在html内使用my-message</i> <child my-message="组件内部数据传递"></child> </div> //js
详解Vue组件之间的数据通信实例

最近在用vue做项目,学习了不少东西,但是有时候光顾着做项目却忘记要找个时间来整理一下最近的一些学习新得,因为是新手,所以可能会有错误的地方,欢迎指出和交流呀~~~ 关于父子组件以及非父子组件之间的数据通信 1 父子组件之间数据通信一般父组件向子组件传递数据用prop进行传递,注意,子组件不能对prop中的数据进行更改,vue中规定是防止子组件对父组件中的数据进行窜改.而子组件向父组件进行数据传递则可以通过事件触发父组件的事件来实现数据的传递.(是不是有点懵逼了,看个例子吧 ) (这里我就直接
详解vue组件之间相互传值的方式

概述我们都知道 Vue 作为一个轻量级的前端框架,其核心就是组件化开发.Vue 就是由一个一个的组件构成的,组件化是它的精髓,也是最强大的功能之一.而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用. 但在实际项目开发过程中,我们需要访问其他组件的数据,这样就就有了组件通信的问题.在 vue 中组件之间的关系有:父子,兄弟,隔代.针对不同的关系,怎么实现数据传递,就是接下来要讲的. 一.父组件向子组件传值即父组件通过属性的方式向子组件传值,子组件通过 props 来接收
详解Vue组件之间通信的七种方式

使用Vue也有很长一段时间,但是一直以来都没对其组件之间的通信做一个总结,这次就借此总结一下. 父子组件之间的通信 1)props和$emit 父组件通过props将数据下发给props,子组件通过$emit来触发自定义事件来通知父组件进行相应的操作具体代码如下: ``` // 父组件 <template> <div> <h3>props和$emit</h3> <Children v-on:changeMsg="changeMsg"
详解vue组件之间的通信

说明:下面我总结了比较常用的vue组件之前通信的方式,最近准备面试,所以有些总结贴上来分享 props和$emit 只有父子关系才可以用这种方式,父组件向子组件传递参数用props,子向父传递使用触发$emit自定义事件 1.props  <Child :name="n
详解vue 组件之间使用eventbus传值

对于前端的我们而言,并非是只有写界面才是最大的问题,很多的情况下,我们需要关注的是数据,比如js页面的数据传递等等,学习vue我们也是需要知道怎么去使用数据当然,使用存储也是可以得,但是并非一定要缓存,当然在vue中有推荐了我们去使用vuex去数据交互,Vuex会让你的Vue代码足够灵活可控,把数据统一存入state, 只允许通过Actions触发Mutations修改.然而,有时候我们的项目并没有复杂到需要用上Vuex.,(我们也不讨论已经废除的vm.$dispatch)很多情况下我们都是需
详解Vue组件复用和扩展之道

概述软件编程有一个重要的原则是 D.R.Y(Don't Repeat Yourself),讲的是尽量复用代码和逻辑,减少重复.组件扩展可以避免重复代码,更易于快速开发和维护.那么,扩展 Vue 组件的最佳方法是什么? Vue 提供了不少 API 和模式来支持组件复用和扩展,你可以根据自己的目的和偏好来选择. 本文介绍几种比较常见的方法和模式,希望对你有所帮助. 扩展组件是否必要要知道,所有的组件扩展方法都会增加复杂性和额外代码,有时候还会增加性能消耗. 因此,在决定扩展组件之前,最好先看看有
详解vue 组件

Vue的两大核心 1. 数据驱动 - 数据驱动界面显示 2. 模块化 - 复用公共模块,组件实现模块化提供基础组件基础组件渲染过程 template ---> ast(抽象语法树) ---> render ---> VDom(虚拟DOM) ---> 真实的Dom ---> 页面 Vue组件需要编译,编译过程可能发生在打包过程 (使用vue文件编写) 运行时(将字符串赋值template字段,挂载到一个元素上并以其 DOM 内部的 HTML 作为模板) 对应的两种方式 r
详解vue 组件的实现原理

组件机制的设计,可以让开发者把一个复杂的应用分割成一个个功能独立组件,降低开发的难度的同时,也提供了极好的复用性和可维护性.本文我们一起从源码的角度,了解一下组件的底层实现原理. 组件注册时做了什么? 在Vue中使用组件,要做的第一步就是注册.Vue提供了全局注册和局部注册两种方式. 全局注册方式如下: Vue.component('my-component-name', { /* ... */ }) 局部注册方式如下: var ComponentA = { /* ... */ } new Vu
详解vue 组件注册

一.了解组件注册的两种方式 1.1 全局组件的注册方法 //main.js import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false let Hello = { name: 'hello', template: '这是全局组件hello' } Vue.component('hello', Hello) new Vue({ el: '#ap
详解vue组件基础

什么是组件组件(Component)是对数据和方法的简单封装.web中的组件其实可以看成是页面的一个组成部分,它是一个具有独立的逻辑和功能的界面,同时又能根据规定的接口规则进行相互融和,最终成为一个完整的应用,页面就是由一个个类似这样的组成部分组成的,比如导航.列表.弹窗.下拉菜单等.页面只不过是这样组件的容器,组件自由组合形成功能完整的界面,当不需要某个组件,或者想要替换某个组件时,可以随时进行替换和删除,而不影响整个应用的运行..前端组件化的核心思想就是将一个巨大复杂的东西拆分成粒度合理的

详解Vue组件之间的数据通信实例

相关推荐

随机推荐