vue组件化开发之兄弟组件之间的数据交互

最新推荐文章于 2024-04-25 10:48:28 发布

hellotqq

最新推荐文章于 2024-04-25 10:48:28 发布

阅读量218

点赞数

分类专栏：前端笔记 vue

本文链接：https://blog.csdn.net/weixin_42072357/article/details/108080175

版权

前端同时被 3 个专栏收录

23 篇文章 0 订阅

订阅专栏

vue

18 篇文章 0 订阅

订阅专栏

笔记

8 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cn.vuejs.org/js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <div>
        <button @click="handle">销毁事件</button>
    </div>
    <test-tom></test-tom>
    <test-jerry></test-jerry>
</div>
</body>
<script type="text/javascript">
    /**
     * 兄弟组件之间的数据交互
     * 定义事件中心
     *
     */
    //提供事件中心
    let hub = new Vue();

    Vue.component('test-tom',{
        data:function(){
            return{
                num:0
            }
        },
        template:`
              <div>
                  <div>Tom:{{num}}</div>
                  <div>
                      <button @click="handle">点击</button>
                  </div>
              </div>
        `,
        methods:{
            handle:function () {
                hub.$emit('jerry-event',2)
            }
        },
        mounted:function () {
            //监听事件
            hub.$on('tom-event',(val)=>{
                this.num +=val;
            });
        }
    });
    Vue.component('test-jerry',{
        data:function(){
            return{
                num:0
            }
        },
        template:`
              <div>
                  <div>Jerry:{{num}}</div>
                  <div>
                      <button @click="handle">点击</button>
                  </div>
              </div>
        `,

        methods:{
        handle:function () {
            hub.$emit('tom-event',1)
        },
    },
        mounted:function () {
            //监听事件
            hub.$on('jerry-event', (val) => {
                this.num += val;
            });
        }
    })
    let vm = new Vue({
        el:'#app',
        data:{

        },
        methods:{
            handle:function () {
               hub.$off('tom-event'),
                   hub.$off('jerry-event')

            }
        }

    })
</script>
</body>
</html>

hellotqq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue组件化开发之兄弟组件之间的数据交互

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cn.vuejs.org/js/vue.js" type="text/javascript" charset="utf-8"></script></head>&lt.
复制链接

扫一扫

专栏目录