【Vue】组件间传值的三种方式：父传子，子传父，非父子传值

引用官网的一句话：父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示：

1，父组件传值给子组件

代码：

<template><div style="padding: 20px;"><span>父组件</span><input type="text" v-model="textInfo" /><ChildInfo :textInfo="textInfo"></ChildInfo></div>
</template><script>
import ChildInfo from '../../views/ChildInfo'
export default {name: 'Home',components: {ChildInfo},data () {return {textInfo: ''}}
}
</script>
<style scoped></style>

<template>
<div><span>我是子组件：{{textInfo}}</span>
</div>
</template><script>
export default {name: 'ChildInfo',props: {textInfo: {type: String,required: true}}
}
</script><style scoped></style>

2，子组件传值给父组件

<template><div style="padding: 20px;"><span>父组件</span><input type="text" v-model="textInfo" /><ChildInfo v-on:funb="funb"></ChildInfo></div>
</template><script>
import ChildInfo from '../../views/ChildInfo'
export default {name: 'Home',components: {ChildInfo},data () {return {textInfo: ''}},methods: {funb (a) {this.textInfo = a}}
}
</script>
<style scoped></style>

<template>
<div><span>我是子组件：{{textInfo}}</span><button @click="funa">&nbsp;&nbsp;发送数据</button>
</div>
</template><script>
export default {name: 'ChildInfo',data () {return {textInfo: '我是子组件的数据'}},methods: {funa () {this.$emit('funb', this.textInfo)}}
}
</script><style scoped></style>

3，非父子组件传值

非父子组件之间传值，需要定义个公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果。

bus文件可以理解为组件A和B的父组件，组件A注册一个事件上浮给bus文件，组件B在bus文件下监听事件

// bus.js
import Vue from 'vue'
export default new Vue()

<template>
<div>A组件:<span>{{elementValue}}</span><input type="button" value="点击触发" @click="elementByValue">
</div>
</template><script>
import Bus from './bus'
export default {name: 'ChildInfo',data () {return {elementValue: 10}},methods: {elementByValue: function () {Bus.$emit('val', this.elementValue)}}
}
</script><style scoped></style>

<template>
<div>B组件:<span>{{elementValue}}</span>
</div>
</template><script>
import Bus from './bus'
export default {name: 'ChildInfo2',data () {return {elementValue: 0}},mounted: function () {var that = this// 用$on事件来接收参数Bus.$on('val', (data) => {that.elementValue = data})},methods: {}
}
</script><style scoped></style>

延申阅读：

vue中非父子组件之间通信除了使用bus总线，也可以使用vuex，两者适用场景不同。

bus适合小项目、数据被更少组件使用的项目，对于中大型项目数据在很多组件之间使用的情况 bus就不太适用了。bus其实就是一个发布订阅模式，利用vue的自定义事件机制，在触发的地方通过$emit向外发布一个事件,在需要监听的页面，通过$on监听事件。

vuex适用中大型项目、数据在多组件之间公用的情况。

发布订阅模式：

在软件架构中，发布订阅是一种消息范式，消息的发送者（称为发布者）不会将消息直接发送给特定的接收者（称为订阅者）。而是将发布的消息分为不同的类别，无需了解哪些订阅者（如果有的话）可能存在。同样的，订阅者可以表达对一个或多个类别的兴趣，只接收感兴趣的消息，无需了解哪些发布者（如果有的话）存在。

参考文章：

Vue2.0的三种常用传值方式、父传子、子传父、非父子组件传值_lander_xiong的博客-CSDN博客_vue 父传子

【Vue】组件间传值的三种方式：父传子，子传父，非父子传值相关推荐

Vue组件间通信的几种方式
引入用vue可以是要组件复用的,而组件实例的作用域是相互独立,这意味着不同组件之间的数据无法互相引用一般来说,组件之间可以有几种关系: 如上图所示,A 和 B.B 和 C.B 和 D 都是父子关系 ...
vue组件间通信的13种方式
前言 vue是数据驱动视图更新的框架, 我们平时开发,都会把页面不同模块拆分成一个一个vue组件, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在v ...
Vue组件间通信的8种方式
1.常用的父子组件通讯方式:props,emit 父组件传入属性,子组件通过props来接收,在子组件中就可以用this.xxx方式使用. 子组件通过$emit(事件名,参数)向外弹出一个自定义事件, ...
【vue】vue组件传值的三种方式
前言 vue的组件传值分为三种方式:父传子.子传父.非父子组件传值引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递父组件通过 prop 给子组件下发数据,子组件通过事件 ...
详解微信小程序页面间传递信息的三种方式
详解微信小程序页面间传递信息的三种方式在开发微信小程序的时候,经常会遇到在页面间传递信息的情况,有三种方法可以实现. 1. 使用数据缓存将要存储的数据使用以下方法放入缓存 wx.setStorag ...
【详细】传参的四种方式以及返回传值的三种方式
[转载]本文主要参考链接下博主文章,再行总结的传参的四种方式按值传参在调用函数时,将实参的值拷贝给形参,形参在函数中被使用.对形参的操作不会影响到实参的值.但是因为发生了拷贝会增加系统开销. p ...
vue中data定义数字类型_[乐意黎原创] Vue中data定义的三种方式和区别
在 Vue中,定义data时,经常有好几种写法,一不小心会混淆,这里彻底详述一下,以便记分清 . 一.在vue中,定义data可以有三种写法. 1. 第一种写法,data是一个对象. var app ...
vue设置html自动跳转路由,vue路由跳转的三种方式是什么？
本教程操作环境:windows7系统.vue2.9版,适用于所有品牌电脑. vue中通过路由跳转的三种方式 router-view 实现路由内容的地方,引入组件时写到需要引入的地方, 需要注意的是,使 ...
容器间通信_Vue组件间通信的6种方式，前端工程师人人都会，网友：太简单了...
Vue 组件间通信只要指以下 3 类通信:父子组件通信.隔代组件通信.兄弟组件通信,下面分别介绍每种通信方式且会说明此种方法可适用于哪类组件间通信. (1)props / $emit 适用父子组件通 ...
容器间通信的三种方式 - 每天5分钟玩转 Docker 容器技术（35）
容器之间可通过 IP,Docker DNS Server 或 joined 容器三种方式通信. IP 通信从上一节的例子可以得出这样一个结论:两个容器要能通信,必须要有属于同一个网络的网卡. 满足这 ...

【Vue】组件间传值的三种方式：父传子，子传父，非父子传值

【Vue】组件间传值的三种方式：父传子，子传父，非父子传值相关推荐

最新文章

热门文章