Vue 兄弟组件间通信实践-优快云博客

vue兄组件之间进行传值

今天在此记录一下我在学习vue时遇到的相对有点不太容易理解的地方-兄弟组件之间进行传值的过程，在此发表一下我的理解和记录学习的过程。

--------------------------------------------------------------

首先需要写入一个事件管理组件 ：

  //事件中心，兄弟组件之间传值全靠它
    var hub=new Vue();

兄弟组件之间传值需要有监听事件和销毁事件 ：

// appent为监听事件名称，兄弟组件用这个名称调用，val为兄弟组件传过来的值
hub.$on('txt-event',(val)=>{
  this.bum+=val
  })//监听事件
hub.$off('appent')//销毁事件

3.触发事件

// 1相当于实参，传递给兄弟组件的val相当于形参进行接收，调用兄弟监听事件名
hub.$emit('text-event',1)

4.以代码为例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <test-tom></test-tom>
    <text-jerry></text-jerry>
</div>
</body>
<script>
    //事件中心，兄弟组件之间传值全靠它
    var hub=new Vue();
    Vue.component('test-tom',{
        data:function () {
            return{
                bum:0,
                num:5
            }
        },
        template:`
            <div>
            <div>TOM:{{bum}}</div>
            <button @click="handlets">点击</button>
</div>
        `,
        methods: {
            handlets:function () {
                hub.$emit('text-event',this.num)
            }
        },
        mounted:function () {
        //监听事件
            hub.$on('txt-event',(val)=>{
                this.bum+=val
            })
        }
    })
    Vue.component('text-jerry',{
        data:function () {
            return{
                bum:0,
                arrts:10
            }
        },
        template:`
            <div>
            <div>JERRY:{{bum}}</div>
            <button @click="handles">点击</button>
</div>
        `,
        methods: {
            handles:function () {
                hub.$emit('txt-event',this.arrts)
            }
        },
        mounted:function () {
            //监听事件
            hub.$on('text-event',(val)=>{
                this.bum+=val
            })
        }
    })
    new Vue({
        el:'#app',
        data:{

        },
        methods: {

        }
    })
</script>
</html>