摘要：前言作为现在比较火的框架之一，相信您在使用的过程中，也会遇到组件间传值的情况，本文将讲解几种组件间传值的几种方法，跟着小编一起来学习一下吧实现注意学习本文，需要您对有一定的了解。为了便于讲解，以下方法均假设父组件是，子组件是，兄弟组件是。
前言
Vue 作为现在比较火的框架之一，相信您在使用的过程中，也会遇到组件间传值的情况，本文将讲解几种 Vue 组件间传值的几种方法，跟着小编一起来学习一下吧！实现
注意： 学习本文，需要您对 Vue 有一定的了解。
为了便于讲解，以下方法均假设父组件是 FatherComponent，子组件是 ChildComponent，兄弟组件是：BrotherComponent。我们来假定一种场景：点击父组件“传递给子组件”按钮，向子组件传递一条消息“I am your father.”；点击子组件“传递给父组件”按钮，向父组件传递一条消息“I am your child.”；点击子组件“传递给兄弟组件”按钮，向兄弟组件传递一条消息“I am your brother.”
1. 方法一父组件 FatherComponent 代码：
{{toFatherInfo}}
子组件 ChildComponent 代码：
{{toChildInfo}}
兄弟组件 BrotherComponent 代码：
{{toBrotherInfo}}
通过上面代码，不难发现，我们通过使用 props 来实现父组件给子组件传值；子组件向父组件传值时，借助 $emit 来实现；而子组件向兄弟组件传值时，将两者结合起来使用。
2. 方法二首先需要先创建 eventHub.js 文件，代码如下：
// 将在各处使用该事件中心 // 组件通过它来通信 import Vue from "vue" export default new Vue()
然后在组件中，可以使用 $emit, $on, $off 分别来分发、监听、取消监听事件。
父组件 FatherComponent 代码：
{{info}}
子组件 ChildComponent 代码：
{{info}}
兄弟组件 BrotherComponent 代码：
3. 方法三{{info}}
我们需要创建 store.js 来存放数据：
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
export default new Vuex.Store({
state: {
fromFatherInfo: "",
fromChildInfo: "",
fromBrotherInfo: ""
},
mutations: {
changeFromFatherInfo (state, fromFatherInfo) {
state.fromFatherInfo = fromFatherInfo
},
changeFromChildInfo (state, fromChildInfo) {
state.fromChildInfo = fromChildInfo
},
changeFromBrotherInfo (state, fromBrotherInfo) {
state.fromBrotherInfo = fromBrotherInfo
}
}
})
实例化：
import Vue from "vue"
import App from "./App"
import store from "./store"
new Vue({
el: "#app",
store,
template: "
父组件 FatherComponent 代码：
{{fromChildInfo}}
子组件 ChildComponent 代码：
{{fromFatherInfo}}
兄弟组件 BrotherComponent 代码：
{{fromBrotherInfo}}
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/101525.html
摘要：前面讲了环境的搭建用打包和的使用以及的使用下面讲一下组件化及组件间传值主要包括父子组件间传值，兄弟组件间传值，不相关组件间传值。组件化及组件间传值组件化组件是最强大的功能之一。 前面讲了环境的搭建用webpack打包vue和Vue-router的使用以及vuex的使用 下面讲一下Vue组件化及组件间传值： 主要包括 父子组件间传值，兄弟组件间传值，不相关组件间传值。 10.Vue组件...
摘要：父组件给子组件传值父组件二哈子组件子组件给父组件父组件子组件点击啦啦啦啦定义状态中引入传值取值地址传值 1、父组件给子组件传值 父组件： import child from ./child.vue export default { components: {child}, data(){ return {name:二哈} } ...
摘要：一父子组件之间的传值父组件传递给子组件需要在子组件中通过接收值子组件传递给父组件自定义事件，要传输的值子父在子组件中需要通过点击事件传递给父组件值，点击事件触发后，通过自定义事件，要传递的值注意在父组件接收时必须在对应的子组件接收相应 一：父子组件之间的传值** 父组件传递给子组件：需要在子组件中通过props接收值子组件传递给父组件：$emit(自定义事件，要传输的值) 子--->父...
摘要：在中由于业务的需要我们往往要在诸多的页面间，组件之间做一些参数的传递与管理在这里我总结了几大经过验证，稳定好用的方式给大家导航传值推荐指数适用范围相邻页面间传值兼容性原理为页面的上挂载了对象可用来做路由跳转，在做页面跳转时可以携带参数回调方 在React Native 中由于业务的需要, 我们往往要在诸多的页面间，组件之间做一些参数的传递与管理, 在这里我总结了几大经过验证，稳定好用的...
阅读 1745·2021-11-23 10:03
阅读 3704·2021-11-22 09:34
阅读 2248·2021-10-08 10:05
阅读 2115·2019-08-30 15:53
阅读 1577·2019-08-30 13:56
阅读 1031·2019-08-29 16:52
阅读 940·2019-08-26 13:31
阅读 3238·2019-08-26 11:45
