36、兄弟之间的传递

最新推荐文章于 2024-02-23 17:56:29 发布

code_dream_wq

最新推荐文章于 2024-02-23 17:56:29 发布

阅读量243

点赞数

分类专栏： # vue学习

本文链接：https://blog.csdn.net/code_dream_wq/article/details/110480800

版权

vue学习专栏收录该内容

40 篇文章 1 订阅

订阅专栏

- 兄弟之间传递数据需要借助于事件中心，通过事件中心传递数据
- 提供事件中心 var hub = new Vue()
- 传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)
- 接收数据方，通过mounted(){} 钩子中触发hub.$on()方法名
- 销毁事件通过hub.$off()方法名销毁之后无法进行传递数据

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>父组件</div>
    <div>
      <button @click='handle'>销毁事件</button>
    </div>
    <test-tom></test-tom>
    <test-jerry></test-jerry>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      兄弟组件之间数据传递
    */
      //1、 提供事件中心
    var 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(){
		//2、传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)   触发兄弟组件的事件
			
          hub.$emit('jerry-event', 2);
        }
      },
      mounted: function() {
         // 3、监听事件，接收数据方，通过mounted(){} 钩子中  触发hub.$on(方法名
        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;
        });
      }
    });
    var vm = new Vue({
      el: '#app',
      data: {
        
      },
      methods: {
        handle: function(){
			//4、销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据
          hub.$off('tom-event');
          hub.$off('jerry-event');
        }
      }
    });
  </script>
</body>
</html>

code_dream_wq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
36、兄弟之间的传递

- 兄弟之间传递数据需要借助于事件中心，通过事件中心传递数据 - 提供事件中心 var hub = new Vue()- 传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)- 接收数据方，通过mounted(){} 钩子中触发hub.$on()方法名- 销毁事件通过hub.$off()方法名销毁之后无法进行传递数据<!DOCTYPE html><html lang="en"><head> <meta cha...
复制链接

扫一扫

专栏目录