vue非父子组件间的传值

2020-3-18    前端达人

vue非父子组件传值的基本语法

创建一个新的vue对象 
var newvue = new Vue()

    

        触发事件
    



newvue.$emit('自定义事件名', 参数)



    

        监听事件
    



newvue.on('自定义事件名', 触发方法名)


    

        销毁事件
    



newvue.off('自定义事件名')

    

        案例
    

    

        放在html页面上即可显示，注意要引入vue
    

    


<!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">
    /*
      兄弟组件之间数据传递
    */
    // 提供事件中心
    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(){
          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;
        });
      }
    });
    var vm = new Vue({
      el: '#app',
      data: {

      },
      methods: {
        handle: function(){
          hub.$off('tom-event');
          hub.$off('jerry-event');
        }
      }
    });
  </script>
</body>
</html>


————————————————

版权声明：本文为CSDN博主「温柔的坚持」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/weixin_43745003/article/details/104919633

    







    


				

				


分享本文至：     
				
        « JS的原型介绍及原型的继承
              react框架 »
    

			

		

		
		
	




    

    
分类

    
  

  

    
日历

    

        

        
    

  

    

      

        

          

            
            
            
          

          

        

      

    

    

      
链接

      
    
                

    

    

      
blogger

      

          

                    

          
蓝蓝
          http://www.lanlanwork.com

      

    

    

      
存档