Question

这是情况。有一个组件（cmp1）在其内部使用搜索栏组件（cmp2）。我的目标是深入cmp2并抓取input元素，在cmp1渲染时将焦点设置在其上。如何使用Vue实现目标？到目前为止，我尝试过的是在ref上设置cmp2，而不是this.$refs.search.$el.firstChild[0].focus()，但我意识到这不是一个选项。所以，也许你会帮我解决这个问题。附上一些截图。非常感谢！

Answer 1

您无需通过访问子html元素手动设置它们。

如果我理解正确，你想要执行父母触发的孩子的功能。

这样做的一种方法是让父级的loaded状态默认为false。将状态作为道具传递给孩子，然后您可以为孩子添加这种状态的手表。当加载变为true时，您的手表应触发所需的操作。
您可以通过让子项中的emit传递函数或者您可以从那里管理的父项输入来使事情复杂化。

但正如评论中所提到的，这不需要是一个复杂的特定情况。我认为可以满足的是父母可以使用isFocused道具。

＃1的例子：

：

<template>
  <my-component :isFocused="focusedElement === 'item-1'"/>
</template>

<script>
  data () {
    focusedElement: null
  },
  mounted() {
    this.focusedElement = 'item-1'
  }
</script>

在子/组件中：

<script>
  params: ['isFocused'],
  watch: {
    isFocused(val){
      if (val === true) {
        this.$refs.input.focus() 
      }
    }
  }
</script>

＃2的例子：

发出一个函数，你可以在孩子身上做到这一点

  methods: {
    setFocus() { this.$refs.input.focus() }
  }
  mounted() {
    this.$emit('onMounted', this.setFocus);
  },

然后，在父级中，您将使用@onMounted侦听器来注册该函数。您仍然需要存储函数并在函数从父级触发时进行管理。我认为选项一是更好的选择

Answer 2

在search-payment-component和参考input元素中创建方法：
```
methods: {
    ...
    focus() { this.$refs.input.focus() }
    ...
}
```
使用this.$refs.searchComponent.focus()在父组件中调用此方法（是的，您还应该引用子组件来使用它）。
将道具focused添加到search-payment-component：
```
props: ['focused'],
...
watch: {
    focused(val) { val && this.$refs.input.focus() }
}
```
但是，如果最佳做法失去焦点，你也应该提供活动。

[增订] 要么如果您只想在初始渲染时进行焦点输入：

    props: { focused: Boolean },
    ...
    mounted() {
        focused && this.$refs.input.focus();
    }

    // in parent template
    ...
    // if you just declared attribute(w/o value) it will be true 
    <search-payment-component focused ><search-payment-component>
    ...

另外，如果你想在mounted钩子中使用子组件，你应该在this.$nextTick方法中使用它来确保子组件被渲染。

如何从另一个组件Vue

2 个答案: