vue组件通信

前言

vue组件之间的通信因组件之间关系的不同通信方式也不同，所以写这篇文章统一整理下，希望对大家有帮助。

父向子组件传递

父向子组件传递数据，通过props

/*父组件代码*/
<template>
	<t-article :title="title" :content="content"></t-article>
</template>
<script>
	import TArticle from './t-article'
    export default {
    	components: {
        	't-article': TArticle
        },
    	data() {
        	return {
            	title: '文章标题',
                content: '文章内容文章内容文章内容文章内容'
            }
        }
    }
</script>

/*子组件代码*/
<template>
	<div class="article">
    	<h6 class="title">{{ titleTxt }}</h6>
        <p class="content">{{ contentTxt }}</p>
    </div>
</template>
<script>
    export default {
    	name: 'TArticle',
    	props: {
        	title: {
            	type: String,
                default: ""
            },
            content: {
            	type: String,
                default: ""
            }
        },
    	data() {
        	return {
            	titleTxt: this.title,
                contentTxt: this.content
            }
        }
    }
</script>

子向父组件传递

子级向父级组件传递数据方法 $on$emit

/*父组件代码*/
<template>
    <span>{{ count }}</span>
    <t-thumbs-up @increment="updateCount"></t-thumbs-up>
</template>
<script>
	import TThumbsUp from './t-thumbs-up'
    export default {
    	components: {
        	't-thumbs-up': TThumbsUp
        },
    	data() {
        	return {
            	count: 0
            }
        },
        method: {
        	updateCount(val) {
            	this.count = val
            }
        },
    }
</script>

/*子组件代码*/
<template>
	<button @click="incrementCounter"></button>
</template>
<script>
    export default {
    	name: 'TThumbsUp',
    	data() {
        	return {
            	count: 0
            }
        },
        method: {
        	incrementCounter() {
                this.count++
            	this.$emit('increment', count)
            }
        },
    }
</script>

兄弟组件间传递

借助于一个公共的Vue的实例对象，不同的组件可以通过该对象完成事件的绑定和触发

/*bus*/
import Vue from 'vue'
export default bus = new Vue()

/*组件xiongda*/
<template>
	<div>
    	<button @click="sendMessge">点击说话</button>
    </div>
</template>
<script>
	import bus from './bus'
    export default {
    	name: 'xiongda',
        method: {
           sendMessge() {
           	bus.$emit('tell', '光头强来了')
           }
        }
    }
</script>

/*组件xionger*/
<template>
	<div>{{ msg }}</div>
</template>
<script>
	import bus from './bus'
    export default {
    	name: 'xionger',
        data() {
        	return {
            	msg: ''
            }
        },
        mounted() {
        	this.listen()
        },
        method: {
        	listen() {
            	bus.$on('tell', message => {
                	this.msg = message
                })
            }
        }
    }
</script>

祖先向后代组件传递

祖先向后代组件传递数据的方法 provide inject, ($dispatch 和$broadcast 作为一对情侣属性，在 Vue 1.0 中主要用来实现基于组件树结构的事件流通信 —— 通过向上或向下以冒泡的形式传递事件流，以实现嵌套父子组件的通信。$broadcast它向下传播到当前实例的所有后代，$dispatch首先会在自己实例本身上触发，然后沿父链向上传播.但是这2个属性已被废除，所以这里就不做介绍了)

/*祖先组件代码*/
<template>
    <div class="anchor"></div>
</template>
<script>
    export default {
    	provide() {
    		return {
      			anchorCom: this
    		}
  		},
        props: {
        	scrollOffset: {
      			type: Number,
      			default: 0
    		}
        }
    }
</script>

/*后代组件代码*/
<template>
    <div class="anchorLink">
    <a
      :data-scroll-offset="scrollOffset"
    >标题</a>
  </div>
</template>
<script>
    export default {
    	inject: ['anchorCom'],
        props: {
    		scrollOffset: {
      			type: Number,
      			default() {
        			return this.anchorCom.scrollOffset
      			}
    		}
  		},
    }
</script>

后代向祖先组件传递

后代向祖先组件传递数据的方法 dispatch

/*后代组件代码*/
<template>
    <div class="child">
    	<button @click="sendInfo"></button>
    </div>
</template>
<script>
    export default {
        data() {
        	return {
            	msg: '我是张三'
            }
        },
        method: {
        	sendInfo() {
            	this.$dispatch('showName', this.msg)
            }
        }
        
    }
</script>

/*祖先组件代码*/
<template>
    <div class="parent">
    	后代的名字是: {{ name }}
    </div>
</template>
<script>
    export default {
        data() {
        	return {
            	name: ''
            }
        },
        method: {
        	acceptInfo() {
            	this.$on('showName', msg => {
                	this.name = msg
                })
            }
        }
        
    }
</script>

没任何关系的组件间传递

没有任何关系的组件之间传递数据的方法 vuex,详细信息请看vue官方文档