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实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
Sep 26 Javascript
JavaScript 基础篇(一)
Mar 30 Javascript
JS 页面计时器示例代码
Oct 28 Javascript
js格式化时间和js格式化时间戳示例
Feb 10 Javascript
jQuery实现多按钮单击变色
Nov 27 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
JS实现转动随机数抽奖特效代码
Apr 16 Javascript
浅谈jQuery中的checkbox问题
Aug 10 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
Apr 28 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 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
PHP 常见郁闷问题答解
2006/11/25 PHP
PHP调用MsSQL Server 2012存储过程获取多结果集(包含output参数)的详解
2013/07/03 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
深入认识JavaScript中的函数
2007/01/22 Javascript
jQuery 树形结构的选择器
2010/02/15 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
JS判断字符串变量是否含有某个字串的实现方法
2016/06/03 Javascript
JS打印组合功能
2016/08/04 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
2017/07/20 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
使用flow来规范javascript的变量类型
2019/09/12 Javascript
react 生命周期实例分析
2020/05/18 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
简单介绍Python中的len()函数的使用
2015/04/07 Python
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
Python实现求数列和的方法示例
2018/01/12 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
python接口自动化框架实战
2020/12/23 Python
css3个性化字体_动力节点Java学院整理
2017/07/12 HTML / CSS
一组SQL面试题
2016/02/15 面试题
垃圾回收的优点和原理
2014/05/16 面试题
冰淇淋店创业计划书范文
2013/12/27 职场文书
经典婚礼主持词
2014/03/13 职场文书
支部组织生活会方案
2014/06/10 职场文书
物业总经理助理岗位职责
2014/06/29 职场文书
民事诉讼授权委托书范文
2014/08/02 职场文书
奖励申请报告范文
2015/05/15 职场文书