vue非父子组件间的传值

最新推荐文章于 2023-02-01 17:33:51 发布

前端爆米花

最新推荐文章于 2023-02-01 17:33:51 发布

阅读量3.1k

点赞数 4

分类专栏： vue 文章标签： vue html javascript

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

版权

vue 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

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>

前端爆米花

关注

4
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
vue非父子组件间的传值

vue非父子组件传值的基本语法创建一个新的vue对象var newvue = new Vue()触发事件newvue.$emit('自定义事件名', 参数)监听事件newvue.on('自定义事件名', 触发方法名)销毁事件newvue.off('自定义事件名')案例放在html页面上即可显示，注意要引入vue<!DOCTYPE html><htm...
复制链接

扫一扫