【Vue知识点】 vue组件之间如何传值

翘阳啦

已于 2022-04-26 09:07:54 修改

阅读量1.9k

点赞数 1

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2022-04-25 21:02:28 首次发布

本文链接：https://blog.csdn.net/qiaoyangla/article/details/124413695

版权

Vue 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

本文详细介绍了Vue中父子组件、子父组件以及兄弟组件之间的通信方式。在父子组件通信中，通过属性(props)将值从父组件传递给子组件；而在子组件向父组件通信时，利用自定义事件($emit)触发并传递数据；对于兄弟组件间的通信，借助一个全局事件总线(bus)作为中转来实现数据传递。

摘要由CSDN通过智能技术生成

1、父组件传值子组件

父组件：<Header :msg='msg'/>

子组件：

props:['msg']

props:{

msg:数据类型

}

子组件props的内容为冒号后面的内容，不是引号里面的内容，一般来说是:xxx='msg' ，props:['xxx'] ，为了方便一般冒号和引号里的内容一致。

2、子组件传值父组件

<input v-model='changeVal'>

子组件：this.$emit("childInput",this.changeVal);

父组件：

<Header @childInput = 'getVal' />

methods:{

getVal(msg){
//msg就是子组件传递的数据

}

}

子组件的第一个参数为自定义事件的名称，第二个参数为要传的数据。

3、兄弟组件之间的传值

通过一个中转（事件总线bus）

A兄弟传值：

import bus from '@/common/bus'

bus.$emit("toFooter",this.msg)

B兄弟接收：

import bus from '@/common/bus'

bus.$on('toFooter',(data)=>{

this.str=data

})

//bus.js 
import Vue from 'vue';
export default new Vue;
//使用 A兄弟 传值
import bus from '路径'
bus.$emit('自定义事件名称',输出数据)
//使用 B兄弟 接收
import bus from '路径'
bus.on('自定义事件名',(res)=>{})