圆月山庄资源网

Vue组件间通信方法总结（父子组件、兄弟组件及祖先后代组件间）
网络编程 2024/12/30 佚名
3 2
圆月山庄资源网 Design By www.vgjia.com

前言

除了使用 Vuex 方法外，vue 提供了各种各样的组件间通信的方案。文章整理一下父子组件、兄弟组件、祖先后代组件间是如何通信的。 "color: #ff0000">"htmlcode"> 

<my-comp v-for="msg in msgs" :key="msg.id" :msg="msg"></my-comp>

父组件有一系列 msg 数据需要通过子组件渲染，将 msg 作为 prop 传递给子组件即可：

import MyComp from '@/components/MyComp.vue'

export default {
 name: 'home',
 components: {
 MyComp
 },
 data () {
 return {
 msgs: [{
 id: 1, data: 'hello js'
 }, {
 id: 2, data: 'css world'
 }, {
 id: 3, data: 'animated style'
 }]
 }
 }
}

我们通过点击子组件每一项触发一个事件，父组件监听这个事件去动态改变子组件的 color 样式，这就是父组件监听子组件事件，事件处理函数可以从子组件传递值给父组件：

<my-comp v-for="msg in msgs" :key="msg.id" :msg="msg" :colored="colored" @handle-change-color="handleChangeColor"></my-comp>

首先增加一个事件 handle-change-color 当这个事件被触发时修改名为 color 的 data，然后将 colored 通过 props 传入到子组件：

import MyComp from '@/components/MyComp.vue'

export default {
 name: 'home',
 components: { // 注册组件
 MyComp
 },
 data () {
 return {
 colored: false, // 状态
 msgs: [{
 id: 1, data: 'hello js'
 }, {
 id: 2, data: 'css world'
 }, {
 id: 3, data: 'animated style'
 }]
 }
 },
 methods: {
 handleChangeColor () {
 this.colored = !this.colored // 监听事件动态改变 colored
 }
 // handleChangeColor (param) { // 子组件触发的事件可能包含参数
 }
}

然后编辑子组件：

<div>
 <div @click="handleClick" :style="{color}">
 {{msg.id}} - {{msg.data}} "htmlcode">



export default {
 name: 'MyComp',
 computed: {
 color () { // color 为样式
 return this.colored "text-align: center">Vue组件间通信方法总结（父子组件、兄弟组件及祖先后代组件间）


父组件 $children 操作子组件




使用 $children 操作子组件。如上述例子中，colored 被定义在父组件中，可以将其移动到子组件中，并在父组件通过 $children 访问到子组件：





<template>
 <div @click="handleClick" class="home">
 <my-comp v-for="msg in msgs" :key="msg.id" :msg="msg"></my-comp>
 </div>
</template>





handleClick 事件被放置在 div 中





import MyComp from '@/components/MyComp.vue'

export default {
 // ...
 data () {
 return {
 msgs: [{
  // ...
 }]
 }
 },
 methods: {
 handleClick () {
 this.$children.forEach(child => {
 child.$data.colored = !child.$data.colored // 逐一控制子组件的 $data
 })
 }
 }
}





在子组件中不需要 $emit 事件，只需维护一个 data：





export default {
 name: 'MyComp',
 data () {
 return {
 colored: false // colored 状态
 }
 },
 computed: {
 color () {
 return this.colored "htmlcode">



<template>
 <div class="home">
 <my-comp v-for="msg in msgs" :key="msg.id" :msg="msg" :colored="colored"></my-comp>
 </div>
</template>





通过 prop 传递 colored 参数给子组件





import MyComp from '@/components/MyComp.vue'

export default {
 name: 'home',
 components: {
 MyComp
 },
 data () {
 return {
 colored: false, // 父组件维护一个 colored 状态
 msgs: [{
  // ...
 }]
 }
 }
}





父组件定义 colored 状态





<template>
 <div>
 <div @click="handleClick" :style="{color}">
 {{msg.id}} - {{msg.data}} "htmlcode">



export default {
 // ...
 props: ['msg', 'colored'],
 methods: {
 handleClick (e) {
 this.$parent.$data.colored = !this.$parent.$data.colored
 }
 }
}





通过 $parent 访问父组件，并修改 $data 状态


非父子组件通信




中央事件总线




我们可以使用使用中央事件总线来处理非父子组件间的通信


具体步骤是创建一个 Vue 实例，然后 $on 监听事件，$emit 来派发事件





// src/eventBus.js

import Vue from 'vue'
export default new Vue()





首先创建并导出一个 Vue 实例





import bus from '@/eventbus'

export default {
 // ...
 methods: {
 handleClick (e) {
  bus.$emit('change-color')
 }
 }
}





后代元素 $emit 触发 eventBus 的事件





import bus from '@/eventbus'

export default {
 // ...
 mounted () {
 bus.$on('change-color', () => {
  this.colored = !this.colored
 })
 }
}





祖先元素 $on 方法监听 eventBus 的事件


provide/inject




适用于祖先和后代关系的组件间的通信，祖先元素通过 provide 提供一个值，后代元素则通过 inject 获取到这个值。这个值默认是非响应的，如果是对象那么则是响应式的：





export default {
 name: 'home',
 provide () {
 return {
  colored: this.colored // 依赖于 data
 }
 },
 components: {
 MyComp
 },
 data () {
 return {
  colored: { // 必须为对象
  value: false
  },
  msgs: [{
// ... 





首先通过 provide 对外提供一个 colored，这个属性依赖于 data 中的 colored，该变量必须为一个对象，才是响应式的。


"htmlcode">



 methods: {
 handleChangeColor () {
  this.colored.value = !this.colored.value
 }
 }





祖先组件监听事件或其他途径去修改 data 改变状态。





export default {
 name: 'MyComp',
 inject: ['colored'], // inject colored
 computed: {
 color () {
  return this.colored.value "htmlcode">



// src/main.js

new Vue({
 data () {
 return { // 在这里！！
  colored: false
 }
 },
 router,
 store,
 render: h => h(App)
}).$mount('#app')





然后我们在其他各个组件中都能够使用：





export default {
 name: 'MyComp',
 // ...
 mounted () {
 console.log(this.$root) // 直接访问到根组件
 },
 // ...
}





Vue组件间通信方法总结（父子组件、兄弟组件及祖先后代组件间）


总结


以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。


                                

                                

                                     

                                

                                    标签：
                                        
vue兄弟组件间通信,vue组件通信原理,vue组件间通信

                                     

                                
圆月山庄资源网 Design By www.vgjia.com

                            

                        

                        

                            

                                广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）

                                免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
                                如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
                            

                        

                        

                            
                            
                        

                        
                        
圆月山庄资源网 Design By www.vgjia.com
www.vgjia.com 圆月山庄资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接