父组件向子组件传值

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

// Father.vue
<template>
    <div id="father">
        <Child :message="msg"></Child>
    </div>
</template>

<script>
    import Child from './Child.vue'
    export default {
        name:'father',
        data() {
            return {
                msg:"Father传给Child的文本"
            }
        },
        components: {
            Child
        }
    }
</script>

// Child.vue
<template>
    <div id="child">
        <h1>{{message}}</h1>
    </div>
</template>

<script>
    export default {
        props: {
            message:{type: String}
        }
    }
</script>

子组件向父组件传值

子组件通过$emit()触发在节点上绑定的自定义事件来执行父组件的方法。

// Father.vue
<template>
    <div id="father">
        <Child @sub="childevent"></Child>
        <p>{{fromchild}}</p>
    </div>
</template>

<script>
    import Child from './Child.vue'
    export default {
        name:'father',
        data() {
            return {
                fromchild:''
            }
        },
        methods: {
            childevent(e) { // e就是传过来的参数
                this.fromchild = e
            }
        },
        components: {
            Child
        }
    }
</script>

// Child.vue
<template>
    <div id="child">
       <button @click='submit'>提交</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                msg:"子组件将要传给父组件的值"
            }
        },
        methods: {
            submit() { // 把this.msg传给Father.vue使用
                this.$emit('sub',this.msg)
            }
        }
    }
</script>

兄弟组件通信

我们先看以下三个文件的代码，我们需要将left组件中的leftmsg传到right组件中使用

// App.vue
<template>
    <div>
       <Left></Left>
       <Right></Right>
    </div>
</template>

<script>
    import Left from './left.vue'
    import Right from './right.vue'
</script>

// left.vue
<template>
    <div>
       <p>left组件</p>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                leftmsg:'left组件的数据'
            }
        }
    }
</script>

// right.vue
<template>
    <div>
       <p>right组件</p>
    </div>
</template>

<script>
    export default {
        
    }
</script>

沿用上述子组件向父组件传值，父组件向子组件传值的方法，将要传的值通过App.vue来完成， App.vue始终充当着媒婆进行说媒，从而将彩礼从left手中送给right组件，熟知这些这个方法的实现应该就不难了。

// App.vue
<template>
    <div>
       <Left @sub="leftsubmit"></Left>
       <Right :Lmsg="leftmsg"></Right>
    </div>
</template>

<script>
import Left from './left.vue'
import Right from './right.vue'
    export default {
        data() {
            return {
                leftmsg
            }
        },
        methods: {
            leftsubmit(e) {
                this.leftmsg = e
            }
        },
        components: {
            Left,
            Right
        }
    }
</script>

// left.vue
<template>
    <div>
       <p>left组件</p>
        <button @click="submit">提交</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                leftmsg:'left组件的数据'
            }
        },
        methods: {
            submit() {
                this.$emit('sub',this.leftmsg)
            }
        }
    }
</script>

// right.vue
<template>
    <div>
       <p>right组件</p>
       <h1>{{Lmsg}}</h1>
    </div>
</template>

<script>
    export default {
        props: {
            Lmsg:{type:String}
        }
    }
</script>

组件间嵌套比较深的话，如图所示，那我们就采用eventBus

组件.png 原理：将要传过去的值变成一个公共变量，让任一组件只要引入这个公共变量就能得到这个值

写一个存放公共变量的文件 common.js

import Vue from 'vue'
let common = new Vue()
export default common

left.vue的操作

// left.vue
<template>
    <div>
       <p>left组件</p>
       <button @click="submit">提交</button>
    </div>
</template>

<script>
import common from './common.js'
    export default {
        data() {
            return {
                leftmsg:'left组件的数据'
            }
        },
        methods: {
            submit() {
                common.$emit('send',this.leftmsg)
            }
        }
    }
</script>

// right.vue
<template>
    <div>
       <p>right组件</p>
       <h1>{{rightmsg}} </h1>
    </div>
</template>

<script>
import common from './common.js'
    export default {
       data() {
        return {
            rightmsg:''
        }
       },
       mounted() {
           common.$on('send',(e) => {
               this.rightmsg = e
           })
       }
    }
</script>

如果项目过大，组件通信需求过多，eventBus就反而显得很繁琐，那么我们就希望有一个集中的公共区域存放需要共享的数据。这个时候vuex就可以闪亮登场了，俗称"专业的媒婆"

vue组件通信

父组件向子组件传值

子组件向父组件传值

兄弟组件通信