将事件传递到组件VueJS的元素上

Question

我有一些包装输入的组件：

<div class="some-component">
    <input type="text" />
</div>

我这样称呼它：

<some-component v-on:click="dostuff" ref="thatcomponent"></some-component>

然后：

methods: {
    dostuff(){
        this.$refs.thatcomponent.$el.focus();
    }
}

我将焦点放在div上是哪个div。此示例是我的第一个用例，但通常我要将组件上调用的所有事件传递给该组件内的特定元素。我不想四处寻找父组件中元素的组件。

有Vue模式吗？

Answer 1

更好的方法是在子组件中添加focus方法

子组件

<div class="child-component">
    <input type="text" ref="theInput" />
</div>

// child-component
methods: {
    focus(){
        this.$refs.theInput.focus();
    }
}

父级组件

<child-component v-on:click="dostuff" ref="childComponent"></child-component>

// parent-component
methods: {
    dostuff(){
        this.$refs.childComponent.focus();
    }
}

无论如何，如果您想与父组件中子组件的输入元素进行交互（如果您无法控制子组件，则很有用

// parent-component
methods: {
    dostuff(){
        this.$refs.childComponent.$el.querySelector('input').focus();
    }
}

Answer 2

我不知道针对Vue的特定解决方案。但是，您可以通过在目标元素上分派新事件来手动将事件从一个元素重定向到另一个元素。
但是，您将需要引用目标元素以及手动处理所有事件类型（没有像foo.addEventListener("*", ...)

这样的通配符事件侦听器。

clicked(e) {
  var target = document.querySelector("#target");
  target.dispatchEvent(new event.constructor(e.type, e));
}

基本示例：
https://codesandbox.io/s/vue-template-76svb

这是一种非常不寻常的模式，应该仔细评估这是否是解决问题的正确方法。

Answer 3

我想您最好的选择是使用ref属性和$ refs对象。 Vuejs文档中的section可能会有用。

子组件

在模板中：

<div class="some-component">
  <input ref="input" type="text" />
</div>

在脚本中

methods: {
  ...
  focus() {
    this.$refs.input.focus();
  },
  ...
},

父项

在模板中：

您需要在此处使用.native修饰符直接侦听根元素上的本地事件。

<some-component v-on:click.native="dostuff" ref="thatcomponent"></some-component>

在脚本中

methods: {
  ...
  dostuff() {
    this.$refs.thatcomponent.focus();
  },
  ...
}

Vuejs文档

  

$ refs仅在呈现组件之后填充，并且它们是无反应的。它仅用作直接子操作的转义线-您应避免从模板或计算的属性中访问$ refs。

这里是CodeSandBox的示例

我希望有帮助。