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语言中的Literal Syntax特性分析
Mar 08 Javascript
Javascript中Array.prototype.map()详解
Oct 22 Javascript
JavaScript采用递归算法计算阶乘实例
Aug 04 Javascript
JavaScript各类型的关系图解
Oct 16 Javascript
JavaScript进阶练习及简单实例分析
Jun 03 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
javascript简单写的判断电话号码实例
May 24 Javascript
原生javascript实现的全屏滚动功能示例
Sep 19 Javascript
JS引用传递与值传递的区别与用法分析
Jun 01 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
Nov 14 Javascript
Angular单元测试之事件触发的实现
Jan 20 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判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
javascript下过滤数组重复值的代码
2007/09/10 Javascript
Javascript 日期处理之时区问题
2009/10/08 Javascript
jquery last-child 列表最后一项的样式
2010/01/22 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
2013/04/26 Javascript
jQuery实用函数用法总结
2014/08/29 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
微信小程序 本地数据读取实例
2017/04/27 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
2018/09/03 Javascript
vue组件之间通信实例总结(点赞功能)
2018/12/05 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
python任务调度实例分析
2015/05/19 Python
Python实现批量转换文件编码的方法
2015/07/28 Python
Python网络爬虫实例讲解
2016/04/28 Python
深入浅析python继承问题
2016/05/29 Python
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
在Python中过滤Windows文件名中的非法字符方法
2019/06/10 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
python二元表达式用法
2019/12/04 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
为什么相对PHP黑python的更少
2020/06/21 Python
CSS3实现div从下往上滑入滑出效果示例
2020/04/28 HTML / CSS
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
马云的职业生涯规划之路
2014/01/01 职场文书
高中体育教学反思
2014/01/29 职场文书
毕业晚会主持词
2014/03/24 职场文书
广告学专业求职信
2014/06/19 职场文书
个人贷款收入证明
2014/10/26 职场文书
党员公开承诺书2016
2016/03/24 职场文书
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android
MySQL系列之五 视图、存储函数、存储过程、触发器
2021/07/02 MySQL
python实现简单的聊天小程序
2021/07/07 Python