返回文章

$listener 与 vue 自定义事件的联系

$listener 与 vue 自定义事件的联系 $listener 是什么 包含了组件的所有的监听器，为了实现事件回传 事件回传 组件关系，父-子-孙 孙组件点击，不用$emit（不用子组件使用自定义事件监听孙组件），实现父组件直接获取孙组件传的参数 结果，点击孙组件后，打印了 from grandson <!-- ... --> <script src=&quot;https://cdn.js…

$listener 与 vue 自定义事件的联系

$listener 是什么

包含了组件的所有的监听器，为了实现事件回传

事件回传

  1. 组件关系，父-子-孙
  2. 孙组件点击，不用$emit（不用子组件使用自定义事件监听孙组件），实现父组件直接获取孙组件传的参数
  3. 结果，点击孙组件后，打印了from grandson
<!-- ... -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
  <div id="app">
    <Children></Children>
  </div>
  <script>
    // 孙组件
    var Grandson = {
      template: `<span @click="transfer">这个点击是为了传给爷爷组件，父组件不做任何监听</span>`,
      methods: {
        transfer() {
          console.log(this.$listeners);
          this.$listeners.tofather("from grandson");
        }
      }
    };
    // 子组件
    var Children = {
      components: {
        Grandson
      },
      template: `
          <div>
            子组件：
            <Grandson  v-on="$listeners" @name="name123"></Grandson>
          </div>
        `,
      methods: {}
    };
    // 父组件
    var app = new Vue({
      el: "#app",
      components: {
        Children
      },
      methods: {
        get(data) {
          console.log(data);
        }
      }
    });
  </script>
</body>

事件回传的本质分析

  1. $listener 本质是一个收集了父组件（本例中的父或子）所有自定义事件的集合
  2. 自定义事件的本质：子组件收集父组件传入的 listener，也就是自定义事件的函数名，拿到这个回调，在$emit 的时候执行这个函数，期间可以传参，本质是在子组件监听这个事件，而不是父组件
  3. $listener 就是那个收集了所有回调的收集器，收集器收集了父或子组件的回调，那么孙组件的点击，就执行这个回调，进而就触发了那个函数，看起来好像是父或子监听，实际是因为孙提前收集了，在点击时候执行，并且可以传相应的参数
  4. 之前以源码角度分析了vue 的 DOM 事件和自定义事件

暂无评论