vue 组件间的通信之子组件向父组件传值的方式


Posted in Javascript onJuly 29, 2020

父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信;

使用步骤:

定义组件:现有自定义组件com-a、com-b,com-a是com-b的父组件;

准备获取数据:com-b要获取父组件data中的name属性;

<com-b :name=“name”></com-b> 使用v-bind 绑定name属性,红色部分为属性名称,可以随意写。

在子组件定义部分里添加选项,值是个字符串数组 props:[‘name'],将上边红色的属性名称写在这里;

之后就可定义在子组件中使用name属性了;

好了,接着本文的重点内容。

写vue,如果页面涉及到多个组件,就会涉及组件之间的通信,可能是父子组件间的通信,也可以是同级组件间的通信,那么,vue里面的组件如何通信。一般来说在vue的数据传递是在父组件传子组件通过属性来传,子组件传父组件通过事件来传值。

1. 子组件通过通过this.$emit()的方式将值传递给父组件;
2. 通过vuex来传递组件间的数据;
3. 通过中央总线来传递组件间的数据;
4. 通过修改父组件传过来的对象属性
5. 父组件使用子组件的引用ref调用子组件的方法获取子组件的数据

一、子组件通过this.$emit()的方式将值传递给父组件,父组件里面的子组件通过@func绑定一个函数来处理

子组件传过来的数据

<template>
  <div class="app">
    <input @click="sendMsg" type="button" value="给父组件传递值">
  </div>
</template>
<script>
export default {
 
  data () {
    return {
      //将msg传递给父组件
      msg: "我是子组件的msg",
    }
  },
   methods:{
     sendMsg(){
       //func: 是父组件指定的传数据绑定的函数,this.msg:子组件给父组件传递的数据
       this.$emit('func',this.msg)
     }
   }
}
</script>

父组件

<template>
  <div class="app">
    <child @func="getMsgFormSon"></child>
  </div>
</template>
<script>
import child from './child.vue'
export default {
  data () {
    return {
      msgFormSon: "this is msg"
    }
  },
  components:{
    child,
  },
  methods:{
      getMsgFormSon(data){
        this.msgFormSon = data
        console.log(this.msgFormSon)
      }
  }
}
</script>

二、通过vuex来传递组件间的数据

vuex就是把数据放到内存里面去,各个组件间都可以共享vuex里面的数据

1.在一个组件间调用this.$store.dispatch(‘findUserInfoList', q_userInfo_form); 来触发vuex里面函数修改vuex的数据,然后在另一个组件用计算属性映射获取vuex的这个属性值,就可以实现组件间的数据传递

computed: mapState({
   //映射vuex的相关属性值
   userInfoList: state => state.userInfoModule.userInfoList,
   start: state => state.userInfoModule.start,
   total: state => state.userInfoModule.total,
}),
method:{
   //查询操作
   findUserInfoList: function(q_userInfoForm, start){
     this.q_userInfoForm.start = (start === null) ? 1 : start;
     this.$store.dispatch('findUserInfoList', q_userInfo_form);
   },
}

三、通过中央总线来传递组件间的数据

对于一些简单的项目里的可能又不是父子组件,可能是同级组件的,另一方面又没有必要使用Vuex,针对这种情形可以使用中央事件总线(Event Bus)来解决问题,主要用到vue对象的on和on和on和emit事件,在同一个vue的实例可以触发这两个事件,比如子组件传递数据到父组件,在子组件通过同一个vue对象触发emitvue的emit事件传递数据,在父组件通过vue实例的emit事件传递数据,在父组件通过vue实例的on监听刚刚emit触发的事件来获取子组件传递过来的数据

先创建一个constantsBus.js文件,里面根据不同模块创建相关的vue实例

/**
 * 不同组件间通讯用的 中央事件总线
 */

import Vue from 'vue';

//用户管理总线
export const userBus = new Vue();

//管理员管理总线
export const adminBus = new Vue();

在一个组件间调用$emit传递数据

//引用刚刚创建的constantsBus.js
import * as constantsBus from '@/common/constantsBus';

vue 组件间的通信之子组件向父组件传值的方式

4. 在另个接收数据的组件用$on来监听获取emit传过来的数据

created() {
   let that = this;
   //监听子组件的事件,获取其他组件传递过来的data数据
   constantsBus.processBus.$on('processChooseAssessor', data => {
     //获取emit触发的processChooseAssessor事件传递过来的data数据
   });
},

四、通过修改父组件传过来的对象属性

一般来说在vue的数据传递是在父组件传子组件通过属性来传,但是通过属性来传值,是单向的,子组件不能修改父组件的prop值,如果在子组件里面修改父组件传过来的prop属性值,会报错,但是也有例外,对象类型的除外,如果父组件传给子组件的属性是对象的话,是可以修改对象里面的值的,并且修改后也对父组件可见,因为对象的话最后的引用都是指向同一块内存,不受子组件不可以修改父组件的属性约束。(不过不建议这样处理,子组件可以修改父组件的属性会污染数据传递,可能以后在那个子组件改了都不知道,一般对象的传递要深拷贝)

五、父组件使用子组件的引用ref调用子组件的方法获取子组件的数据

1.在子组件写一个获取数据的方法

vue 组件间的通信之子组件向父组件传值的方式

2.父组件通过子组件的ref调用这个方法获取子组件的数据

<trademark-file-upload ref="trademarkFileUpload" :uploadFileList="uploadFileList"></trademark-file-upload>

<script>
let fileList = this.$refs.trademarkFileUpload.getFileList();
<script>

到此这篇关于vue 组件间的通信之子组件向父组件传值的方式的文章就介绍到这了,更多相关vue 子组件向父组件传值内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript xml为数据源的下拉框控件
Jul 07 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
Aug 15 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
Aug 30 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
Dec 02 Javascript
window.onload使用指南
Sep 13 Javascript
每天一篇javascript学习小结(属性定义方法)
Nov 19 Javascript
JS中多种方式创建对象详解
Mar 22 Javascript
基于node实现websocket协议
Apr 25 Javascript
纯jQuery实现前端分页功能
Mar 23 jQuery
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
详解用函数式编程对JavaScript进行断舍离
Sep 18 Javascript
基于JS实现带动画效果的流程进度条
Jun 01 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
Jul 29 #Javascript
vuex管理状态仓库使用详解
Jul 29 #Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 29 #Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 #Javascript
Vue实现input宽度随文字长度自适应操作
Jul 29 #Javascript
vue 判断元素内容是否超过宽度的方式
Jul 29 #Javascript
在vue中实现给每个页面顶部设置title
Jul 29 #Javascript
You might like
使用sockets:从新闻组中获取文章(一)
2006/10/09 PHP
用PHP和ACCESS写聊天室(七)
2006/10/09 PHP
360通用php防护代码(使用操作详解)
2013/06/18 PHP
百度地图API应用之获取用户的具体位置
2014/06/10 PHP
Laravel SQL语句记录方式(推荐)
2016/05/26 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
JsEasy简介 JsEasy是什么?与下载
2007/03/07 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
2011/07/15 Javascript
Javascript中自动切换焦点实现代码
2012/12/15 Javascript
jquery中prop()方法和attr()方法的区别浅析
2013/09/06 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
2015/02/13 Javascript
Node.js重新刷新session过期时间的方法
2016/02/04 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
jQuery图片轮播功能实例代码
2017/01/29 Javascript
vue图片加载与显示默认图片实例代码
2017/03/16 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
[01:02]DOTA2上海特锦赛SHOWOPEN
2016/03/25 DOTA
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
Win7上搭建Cocos2d-x 3.1.1开发环境
2014/07/03 Python
简介Python中用于处理字符串的center()方法
2015/05/18 Python
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
Python 自动刷博客浏览量实例代码
2017/06/14 Python
实例讲解Python3中abs()函数
2019/02/19 Python
python爬虫实现获取下一页代码
2020/03/13 Python
全球领先的在线cosplay服装商店:RoleCosplay
2020/01/18 全球购物
你在项目中用到了xml技术的哪些方面?如何实现的?
2014/01/26 面试题
考生诚信考试承诺书
2014/05/23 职场文书
机械专业求职信
2014/05/25 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技