父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信;
使用步骤:
定义组件:现有自定义组件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) "color: #ff0000">三、通过中央总线来传递组件间的数据对于一些简单的项目里的可能又不是父子组件,可能是同级组件的,另一方面又没有必要使用Vuex,针对这种情形可以使用中央事件总线(Event Bus)来解决问题,主要用到vue对象的
o n 和on和on和emit事件,在同一个vue的实例可以触发这两个事件,比如子组件传递数据到父组件,在子组件通过同一个vue对象触发 e m i t 事 件 传 递 数 据 , 在 父 组 件 通 过 v u e 实 例 的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';4. 在另个接收数据的组件用$on来监听获取emit传过来的数据
created() { let that = this; //监听子组件的事件,获取其他组件传递过来的data数据 constantsBus.processBus.$on('processChooseAssessor', data => { //获取emit触发的processChooseAssessor事件传递过来的data数据 }); },四、通过修改父组件传过来的对象属性
一般来说在vue的数据传递是在父组件传子组件通过属性来传,但是通过属性来传值,是单向的,子组件不能修改父组件的prop值,如果在子组件里面修改父组件传过来的prop属性值,会报错,但是也有例外,对象类型的除外,如果父组件传给子组件的属性是对象的话,是可以修改对象里面的值的,并且修改后也对父组件可见,因为对象的话最后的引用都是指向同一块内存,不受子组件不可以修改父组件的属性约束。(不过不建议这样处理,子组件可以修改父组件的属性会污染数据传递,可能以后在那个子组件改了都不知道,一般对象的传递要深拷贝)
五、父组件使用子组件的引用ref调用子组件的方法获取子组件的数据
1.在子组件写一个获取数据的方法
2.父组件通过子组件的ref调用这个方法获取子组件的数据
<trademark-file-upload ref="trademarkFileUpload" :uploadFileList="uploadFileList"></trademark-file-upload> <script> let fileList = this.$refs.trademarkFileUpload.getFileList(); <script>
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]