小编Eug*_*aev的帖子

我需要连接到 WebSockets 服务器并记录它的消息。使用 React 类组件，我会将这个逻辑放在componentDidMount生命周期钩子中并愉快地继续，但我不确定如何使用钩子正确实现它。

这是我的第一次尝试。

import React, {useEffect} from 'react';

export default function AppWs() {
  useEffect(() => {
    let ws = new WebSocket('wss://ws.kraken.com/');
    ws.onopen = () => console.log('ws opened');
    ws.onclose = () => console.log('ws closed');

    ws.onmessage = e => {
      const message = JSON.parse(e.data);
      console.log('e', message);
    };

    return () => {
      ws.close();
    }
  }, []);

  return (
    <div>hooks + ws</div>
  )
}

我向 中添加了连接和日志逻辑useEffect，提供了带有依赖项的空数组，并且一切正常。直到我需要添加pause状态以暂停日志记录。

export default function AppWs() {
  const [isPaused, setPause] = …

Chrome 开发工具允许更改 javascript 执行上下文。

它非常方便，我在调试过程中经常使用它。

但是我需要在 Firefox 中测试我的项目，但我找不到 UI 来更改执行上下文。

火狐有这个功能吗？

我有一个BaseInput.vue接受属性并发出事件的基本组件。通过使用指令可以很容易地绑定所有属性v-bind="$attrs"。

// BaseInput.vue
<template>
  <label>
    <input
      v-bind="$attrs"
      @focus="$emit('focus')"
      @blur="$emit('blur')"
    >
  </label>
</template>

<script>
export default {
  inheritAttrs: false,
};
</script>

接下来，我有一个包装器组件WrapInput.vue，它将属性传递给BasicInput并发出事件。

// WrapInput.vue
<template>
  <basic-input
    v-bind="$attrs"
    @focus="$emit('focus')"
    @blur="$emit('blur')"
  />
</template>

<script>
import BasicInput from '@/storybook/pages/BasicInput';

export default {
  components: { BasicInput },
  inheritAttrs: false,
};
</script>

我的问题：Vue 中有没有一种方便的方法可以在“代理”组件中传递一堆事件，而不需要一一列出它们？我期望这样的事情：

// WrapInput.vue
<template>
  <basic-input
    v-bind="$attrs"
    v-bind="$events" // is it possible to proxy all events in a single line?
  />
</template>

<script>
import BasicInput from …