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

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'
 }]
 }
 }
}

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

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">

父组件 $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兄弟组件间通信,vue组件通信原理,vue组件间通信
                                     

                            
                        
                        

                            

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

                            

                                
                                    上一篇
                                    
vue 项目 iOS WKWebView 加载
                                
                            
                            

                                
                                    下一篇
                                    
详解vue-cli+element-ui树形表格(多级表格折腾小计)
                                
                            
                        
                        
                        

                            

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

                                

                                    

                                        

                                            

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

                                                
                                            
                                            

                                                

                                                

                                                

                                            
                                            

                                        
                                    
                                    

                                    

                                        
暂无“Vue组件间通信方法总结（父子组件、兄弟组件及祖先后代组件间）”评论...