javascript - 如何从另一个组件Vue获取组件的HTML元素

Question

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

Answer 1

您不需要通过访问子 html 元素来手动设置这些。

如果我理解正确的话，您想要执行由父级触发的子级函数。

1. 实现此目的的一种方法是让父级的 loaded 状态默认为 false。将状态作为 prop 传递给子级，然后您可以向子级添加此状态的监视。当loaded变为true时，您的 watch 应该触发所需的操作。

2. 您可以通过让子级中的发射将函数或输入传递给您可以从那里管理的父级来使事情变得有点复杂。

但正如评论中提到的，这并不需要是一个复杂的情况。我认为为父级提供一个 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 监听器来注册该函数。您仍然需要存储该函数并在该函数从父级触发时进行管理。我认为选项一是更好的选择