vue中组件间通讯的8种方法（父传子、子传父、ref、Bus、Vuex、$attrs / $listeners、provide / inject API、$parent / $children

已于 2022-08-09 09:48:46 修改
阅读量9k 收藏 35
点赞数 9
分类专栏： vue基础知识与运用 文章标签： vue.js javascript html5 es6 前端
于 2020-11-22 21:21:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44246717/article/details/109556983
版权

 其实在 Vue 的学习中，遵循着二八法则，我们常用的 20% 的 API 就能解决大部分日常问题，剩余的 API 感觉用处不大。但是，抽点时间去了解那些冷门的 API，也许你能发现一些不一般的风景

 下面有8种组件间通讯方法，代码中都写了注释哦，文章总结有代码下载链接

 根据项目实际情况，使用最佳的方法，能令你，事半功倍



1、父传子

 子组件通过props接收父组件传来的数据

 最佳使用场景，数据简单，状态单一，优先使用，优先级 > 后6种方法

父组件
<template>
  <div id="parent">
    <!-- 把父组件的name传递给子组件 -->
    <child :name="name"></child>
  </div>
</template>

<script>
// 引入子组件
import Child from './child'
export default {
  components: { Child },
  data() {
    return {
      name: '张三',
    }
  },
}
</script>
子组件
<template>
  <div id="child">{{ name }}</div>
</template>

<script>
export default {
  props: {
    name: String, // 通过props，接受父组件传来的string类型的name
  },
}
</script>



2、子传父

 父组件传递自定义方法给子组件，子组件通过$emit调用父组件传来的方法

 最佳使用场景，数据简单，状态单一，优先使用；优先级 > 后6种方法

父组件
<template>
  <div id="parent">
    <!-- 把父组件的自定义changeName方法传递给子组件 -->
    <child @changeName="changeName"></child>
  </div>
</template>

<script>
// 引入子组件
import Child from './child'
export default {
  components: { Child },
  methods: {
    // 父组件传给子组件的方法
    changeName(newName) {
      console.log(newName) // '李四'；当子组件点击修改姓名时，触发
    },
  },
}
</script>
子组件
<template>
  <div id="child">
    <p>{{ userInfo.name }}</p>
    <button @click="changeUserInfo('李四')">修改姓名</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        name: '张三',
      },
    }
  },
  methods: {
    // 点击修改姓名时调用
    changeUserInfo(newName) {
      this.userInfo.name = newName
      // 调用父组件传给子组件的自定义changeName方法
      // 触发父组件所对应的changeName方法，把用户新的名字使用参数传递
      this.$emit('changeName', newName)
    },
  },
}
</script>



3、兄弟间传值(vue bus)

 利用中央事件总线，vue bus，通俗来讲就是利用创建空的vue实例，进行传值

 最佳使用场景：组件不多，管理的状态、数据简单、状态(数据)没变化依旧触发时，优先选用bus，而不是选用，使用起来更麻烦的vuex；优先级bus > vuex

父组件
<template>
  <div id="parent">
    <child1></child1>
    <child2></child2>
  </div>
</template>

<script>
// 引入子组件Child1、Child2，两为兄弟组件
import Child1 from './child1'
import Child2 from './child2'
export default {
  components: { Child1, Child2 },
}
</script>
bus.js
// vue-bus数据总线机制，兄弟组件间通信

import Vue from 'vue'
// 使用 Event Bus，创建全局空的Vue实例：bus
const bus = new Vue()

export default bus
子组件(child1)
<template>
  <div id="child1">child1</div>
</template>

<script>
// 引入bus vue空实例对象，兄弟间通信
import bus from '@/utils/bus'
export default {
  created() {
    // 组件初始化 创建changeName方法 至bus vue空实例对象里
    // 触发时，自动调用$on的第二个参数 回调方法，并接收newName参数
    bus.$on('changeName', (newName) => {
      console.log(newName) // '李四'；当兄弟组件child2点击修改姓名时，触发
    })
  },
}
</script>
子组件(child2)
<template>
  <div id="child2">
    <p>{{ userInfo.name }}</p>
    <button @click="changeUserInfo('李四')">修改姓名</button>
  </div>
</template>

<script>
// 引入bus vue空实例对象，兄弟间通信
import bus from '@/utils/bus'
export default {
  data() {
    return {
      userInfo: {
        name: '张三',
      },
    }
  },
  methods: {
    // 点击修改姓名时调用
    changeUserInfo(newName) {
      this.userInfo.name = newName
      // 调用bus vue空实例对象中的child1创建的changeName方法
      // 并把用户新的名字使用参数传递
      bus.$emit('changeName', newName)
    },
  },
}
</script>



4、ref

 父组件通过ref获取子组件的vue实例对象

 最佳使用场景：父组件直接操作子组件数据、方法时；如：在父组件里清空(重置)子组件的数据

父组件
<template>
  <div id="parent">
    <!-- 绑定子组件ref，可获取子组件的vue实例对象 -->
    <child ref="child"></child>
    <button @click="getUserInfo">获取用户信息</button>
  </div>
</template>

<script>
// 引入子组件
import Child from './child'
export default {
  components: { Child },
  methods: {
  	// 点击获取用户信息按钮，调用
    getUserInfo() {
      // 获取child组件实例
      // 可以获取、修改child中的data数据，也可以调用child组件中的方法
      // 使用了对象解构赋值，下面一行代码同等于
      // const child = this.$refs.child
      const { child } = this.$refs // 同等于child子组件的this
      console.log(child.userInfo.name) // '张三'；当点击获取用户信息时，触发
    },
  },
}
</script>
子组件
<template>
  <div id="child">{{ userInfo.name }}</div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        name: '张三',
      },
    }
  },
}
</script>



5、父链 / 子链($parent / $children)

 父组件通过$parent/$children获取组件的vue实例对象

 优点：可直接操作父、子组件的数据、方法，可快速、便捷操作
 缺点：会简化两个深度耦合的组件，不要为了一时方便 (少写代码) 而牺牲数据流向的简洁性，代码可读性会减弱

父组件
<template>
  <div id="parent">
    <p>{{ parentUserInfo.name }}</p>
    <button @click="getChildUserInfo">获取子组件用户信息</button>
    <child></child>
  </div>
</template>

<script>
// 引入子组件
import Child from './child'
export default {
  components: { Child },
  data() {
    return {
      parentUserInfo: {
        name: '张三爹',
      },
    }
  },
  methods: {
    // 点击获取子组件用户信息按钮，调用
    getChildUserInfo() {
      // 获取child组件实例
      // 可以获取、修改child中的data数据，也可以调用child组件中的方法
      // 可能有多个子组件，所以获取到的是，由多个子组件实例对象组成的数组
      const childrenArr = this.$children 
      // 第一项才是 组件名为Child的组件
      const child = childrenArr[0] // 同等于child父组件的this
      console.log(child.childUserInfo.name) // '张三'；当点击获取用户信息时，触发
    },
  },
}
</script>
子组件
<template>
  <div id="child">
    <p>{{ childUserInfo.name }}</p>
    <button @click="getParentUserInfo">获取父组件用户信息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      childUserInfo: {
        name: '张三',
      },
    }
  },
  methods: {
    // 点击获取父组件用户信息按钮，调用
    getParentUserInfo() {
      // 获取parent组件实例
      // 可以获取、修改parent中的data数据，也可以调用parent组件中的方法
      // 父组件是唯一的，所以直接获取到parent父组件实例对象
      const parent = this.$parent // 同等于parent子组件的this
      console.log(parent.parentUserInfo.name) // '张三爹'；当点击获取父组件用户信息时，触发
    },
  },
}
</script>



6、Vuex

 集中式状态管理模式，Vuex 的状态管理存储是响应式的，可以集中式存储管理应用的所有状态

 最佳使用场景：组件嵌套深，组件量多；全局状态数据
 优点：状态统一管理，可维护性高
 缺点：修改状态时，但状态未更改时，不会触发，这时应使用bus

父组件
<template>
  <div id="parent">
    <child1></child1>
    <child2></child2>
  </div>
</template>

<script>
// 引入子组件Child1、Child2，两为兄弟组件
import Child1 from './child1'
import Child2 from './child2'
export default {
  components: { Child1, Child2 },
}
</script>
main.js(入口文件引入、挂载store)
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
store/index.js(vuex文件)
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    userInfo: {
      name: '张三',
    },
  },
  mutations: {
    // 修改用户姓名
    changeUserInfo(state, data) {
      state.userInfo.name = data
    },
  },
  actions: {},
  modules: {},
})
子组件(child1)
<template>
  <div id="child1">
    <p>{{ userInfo.name }}</p>
    <button @click="changeUserInfo('李四')">child1修改姓名</button>
  </div>
</template>

<script>
export default {
  computed: {
    userInfo() {
      return this.$store.state.userInfo
    },
  },
  methods: {
    // 点击修改姓名时调用
    changeUserInfo(newName) {
      this.userInfo.name = newName
      this.$store.commit('changeUserInfo', newName)
    },
  },
}
</script>
子组件(child2)
<template>
  <div id="child2">
    <p>{{ userInfo.name }}</p>
    <button @click="changeUserInfo('王五')">child2修改姓名</button>
  </div>
</template>

<script>
export default {
  computed: {
    userInfo() {
      return this.$store.state.userInfo
    },
  },
  methods: {
    // 点击修改姓名时调用
    changeUserInfo(newName) {
      this.userInfo.name = newName
      this.$store.commit('changeUserInfo', newName)
    },
  },
}
</script>



7、$ attrs/$ listeners

 子组件通过$attrs/$listeners获取父组件传递的数据和方法

 最佳使用场景：父、子孙组件通讯

父组件
<template>
  <div id="parent">
    <button @click="changeName('李四')">修改姓名</button>
    <!-- 把父组件的name传递给子组件 -->
    <!-- 把父组件的changeName方法，子组件通过$listeners获取方法 -->
    <child :name="name" v-on="{ changeName }"></child>
  </div>
</template>

<script>
// 引入子组件Child
import Child from './child'
export default {
  components: { Child },
  data() {
    return {
      name: '张三',
    }
  },
  methods: {
    // 修改姓名，并传递给子组件、子孙组件使用，用$listeners获取方法
    changeName(newName) {
      this.name = newName
      console.log(this.name)
    },
  },
}
</script>
子组件
<template>
  <div id="child">
    <p>子组件：{{ $attrs.name }}</p>
    <button @click="changeName('王五')">子组件-修改姓名</button>
    <!-- v-bind="$attrs"：把父组件所绑定传递过来的name，再次传递给子孙组件 -->
    <!-- v-on="$listeners"：把父组件所绑定传递过来的方法changeName，再次传递给子孙组件 -->
    <child-child v-bind="$attrs" v-on="$listeners"></child-child>
  </div>
</template>

<script>
import ChildChild from './child-child'
export default {
  components: { ChildChild },
  inheritAttrs: false, // 是否显示元素上的属性，默认为true: 显示
  methods: {
    // 修改姓名
    changeName(newName) {
    // 通过$listeners调用父组件传来的changeName方法
      this.$listeners.changeName(newName)
    },
  },
}
</script>
子孙组件
<template>
  <div id="child-child">
    <p>子孙组件：{{ $attrs.name }}</p>
    <button @click="changeName('吴六')">子孙组件-修改姓名</button>
  </div>
</template>

<script>
export default {
  inheritAttrs: true, // 是否显示元素上的属性，默认为true: 显示
  methods: {
    // 修改姓名
    changeName(newName) {
    // 通过$listeners调用父组件传来的changeName方法
      this.$listeners.changeName(newName)
    },
  },
}
</script>



8、provide / inject API

 父路由、父组件通过provide提供给子路由、子组件数据、方法
 子路由、子组件，通过inject注入父路由、父组件所提供的数据、方法

 提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的，因为对象在内存中保存的是一个地址。

根组件(App.vue)
<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      isRouterAlive: true,
    }
  },
  // 父组件中返回要传给下级的数据
  provide() {
    return {
      reload: this.reload, // 把reload方法传递给子组件、子路由
    }
  },
  methods: {
    reload() {
      console.log('正在刷新组件...')
      this.isRouterAlive = false
      this.$nextTick(() => {
        console.log('正在渲染dom...')
        this.isRouterAlive = true
        this.$nextTick(() => {
          console.log('dom渲染完成')
        })
      })
    },
  },
}
</script>
父组件
<template>
  <div id="parent">
    <child></child>
  </div>
</template>

<script>
// 引入子组件Child
import Child from './child'
export default {
  components: { Child },
  data() {
    return {
      name: '张三',
    }
  },
  provide() {
    return {
      name: this.name, // 把name传递给子组件、子路由
    }
  },
}
</script>
子组件
<template>
  <div id="child">
    <p>子组件：{{ name }}</p>
    <button @click="childReload">child刷新组件</button>
    <child-child></child-child>
  </div>
</template>

<script>
import ChildChild from './child-child'
export default {
  components: { ChildChild },
  inject: ['name', 'reload'],
  created() {
    console.log(this.name) // '张三'；获取父组件parent通过provide提供的name数据
  },
  methods: {
    // 刷新组件
    childReload() {
      // 获取根组件App通过provide提供的reload方法
      // 调用根组件reload()方法
      this.reload()
    },
  },
}
</script>
子孙组件
<template>
  <div id="child-child">
    <p>子孙组件：{{ name }}</p>
    <button @click="childReload">child-child刷新组件</button>
  </div>
</template>

<script>
export default {
  inject: ['name', 'reload'],
  created() {
    console.log(this.name) // '张三'；获取父组件parent通过provide提供的name数据
  },
  methods: {
    // 刷新组件
    childReload() {
      // 获取根组件App通过provide提供的reload方法
      // 调用根组件reload()方法
      this.reload()
    },
  },
}
</script>



总结

1、父子通信：

①父传子
②子传父
③ref
④Bus
⑤Vuex
⑥$attrs / $listeners
⑦provide / inject API
⑧父链 / 子链($parent / $children)

2、兄弟通信

①Bus
②Vuex

3、跨级通信

①Bus
②Vuex
③ref
④$attrs / $listeners
⑤provide / inject API
⑥父链 / 子链($parent / $children)

代码下载：https://gitee.com/staraliang/vue-component-communication.git

你可能感兴趣的文章：

程序员良仔
关注
专栏目录
vue数据传递--父传子-方法传递
weixin_47683287的博客
10-29 1275
vue数据传递二 <!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html cl
vue2的12种组件间通信方式，父传子，子传父，兄弟传值（超级硬核，宝藏）
m0_67392409的博客
03-06 443
玩之前创建一个 父组件 和 一个子组件 ，祝您玩的开心，整理了3多个小时，码字不易。 1、props传递数据 在父组件子组件添加自定义属性，挂载需要传递的数据，子组件用props来接受，接收方式也可以是数组，也可以是对象，子组件接收到数据之后，不能直接修改父组件的数据。会报错，所以当父组件重新渲染时，数据会被覆盖。如果子组件内要修改的话推荐使用 computed // Parent.vue 传送 <template> ? <child :msg="msg"></chil.
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
10-18
在Vue的框架开发的项目过程中，经常会用到组件来管理不同的功能，有一些公共的组件会被提取出来。下面通过本文给大家介绍Vue开发中常用的三种传值方式父传子、子传父、非父子组件传值，需要的朋友参考下吧
vue3组件之间通信(一)——父传子属性和方法
weixin_44784401的博客
07-31 1万+
vue在setup函数和script setup 中如何实现父传子属性和方法
如何在Vue3中实现子组件向父组件传递数据
最新发布
有我更精彩的博客
07-08 3770
在Vue3中，子组件向父组件传递数据是非常常见的需求。无论是表单数据提交、事件触发还是状态改变，子组件与父组件之间的数据传递是实现数据联动和维持应用状态的一部分。为了实现这一目标，我们主要通过自定义事件来完成。Vue3提供了一种新的API来处理这一过程，即。在这一API的帮助下，我们可以更为优雅和灵活地实现组件间的数据流动。在Vue3中，在组件之间传递数据是一项基础且重要的技能。无论是通过props和emit还是更高级的状态管理工具，理解并掌握这些方法能使你的开发工作更为顺利。
Vue组件通信父传方法给子组件调用
weixin_34390996的博客
12-07 176
// 父组件中将 :meth='changeCom1' 传入入子组件 ， 子组件运行 meth(i) 方法 并给他传参数 ,在父组件可以获取这个参数，并做相应的操作 // 父组件 <template> <div class="hello"> <h1>{{h1}}</h1> //将changeCom...
子传父、父传子方法记录
qq_42236548的博客
06-28 484
子传父 -props 父传子-emit <template> <div class="hello"> 子组件 <h3>{{ title }}</h3> <button @click="childClick">按钮</button> </div> </template> <script> export default { name: "HelloWorld"..
vue中子组件和子组件之间怎么通信_Vue组件间通信6种方式
weixin_39979159的博客
12-22 2604
摘要： 总有一款合适的通信方式。Fundebug经授权转载，版权归原作者所有。前言组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系(可能隔多代)。针对不同的使用场景，如何选择行之有效的通信方式...
vue中组件之间通讯的13种方式
v610379640的博客
07-15 851
vue中组件之间通讯的13种方式
【Vue.js】兄弟组件之间调用对方的方法
热门推荐
非正常人研究室
08-31 1万+
参考：Vue兄弟组件之间如何调用对方的方法 概述 兄弟组件之间的通讯有一个方法是通过父组件进行交互，那么解决的思路就是子组件调用父组件的方法，然后父组件调用另一个子组件的方法，这样就实现了兄弟组件的交互功能。 父组件调用子组件方法 首先被父组件调用的子组件方法定义一下 appendToTree({param}){ console.log('这是子组件tree...
Vue组件间通信的几种方式
DZQ1223的博客
06-27 982
组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：父子组件通信；兄弟组件通信；跨级组件通信根据以上对这7种组件间的通信方法，可以将不同组件间的通信分为4种类型：父子组件间通信、跨代组件间通信、兄弟组件间通信、任意组件间通信父子组件间通信子组件通过 props 属性来接受父组件的数据，然后父组件在子组件上注册监听事件，子组件通过 emit 触发事件来向父组件发送数据。
组件之间的常见传值方式
weixin_43273592的博客
07-11 340
父组件通过 provide 定义变量 ,子组件中通过 inject 调用变量，不管有几层子组件 都能通过 inject 来调用 provide 的数据 , 但是这个数据是不响应的。通过 v-model 双向数据绑定也可以实现组建之间的传值，v-model 是value 和 @input 事件的合写, 也能绑定到组件上。ref 引用可以作用在 h5 标签上，也可作用在组件标签上，作用在 h5 标签上是获取的是 DOM 对象， 作用在组件标签上，通过。对父组件进行操作，在父组件内可以直接通过。
Vue组件间通信，父传子方法，及props三种接收方式
weixin_44475213的博客
08-04 6387
Vue组件间通信，父传子方法，及props三种接收方式
如何实现组件之间的通信（父传子，子传父，兄弟组件互传）
qq_45942606的博客
12-15 8823
一、父传子 1.父传子通用的方法就是借助props这个属性 （1）如下图我创建了一个Dom组件，并将它引入到父组件App.vue中 (2)下面我在父组件定义一个变量msg并赋值，然后通过在子组件上写上:msg='msg’的形式，将值传给子组件 (3)在子组件中通过props属性接收父组件传过来的值,获取后并将值赋值给子组件中的变量name 在页面中可以看到如下效果 二、子传父 1、方法一(通过props和回调函数形式) (1)我在父组件创建一个方法dom通过在子组件上加入:dom='dom’的形式将
Vue中的子传父、父传子详细（vue2子传父、父传子，vue3子传父、父传子）
weixin_65793170的博客
03-25 7687
在 语法中，你不需要显式地导出任何东西，因为所有顶层变量、函数和组件都会自动暴露给模板和其他组件。
vue组件之间ref传值和bus总线传值
weixin_43930256的博客
11-23 368
vue组件之间ref传值和bus总线传值
Vue组件六种通信方式的优缺点及应用场景
weixin_47111901的博客
04-23 4558
前言 在做vue项目中，组件之间的通信是必不可少的，但是vue有多少种方式、用法、优缺点及适用场景，本篇文章大概总结一下。（本篇摘抄[Vue组件通信方式及其应用场景总结](https://juejin.cn/post/6903796293445877773)并根据自己的理解做了修改） props 基本用法 ...
ref的父子传值
qq_53957888的博客
08-23 404
vue中的父子传值-ref形式
Vue父组件拿到接口的数据，并把数据传给子组件的问题；同时，父组件数据更新，子组件同样拿到新数据的问题
m0_63834711的博客
08-25 4906
在vue中，有时需要在父组件页面调用接口时，并把数据传给子组件。一般的做法中，子组件拿不到父组件传过来的值。原因是什么捏？？？原因就是：父组件跟子组件获取数据是同时进行的，自然而然，子组件拿到的是父组件传过来的空数据。父组件都还在调用接口拿数据，子组件就已经开始拿了，理想当然的拿不到嘛~要把formData传过去只需这样，子组件就能拿到有值的数据了。。。
Vue组件间通信：父传子、子传父的3种方法
"本文主要介绍了Vue.js中三种常见的组件间通信方法：父组件向子组件传值、子组件向父组件传值。" 在Vue.js开发中，组件间的通信是构建复杂应用的关键部分。以下是对标题和描述中提及的三种传值方法的详细解释： 1....
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员良仔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值