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官方文档