如何从另一个组件Vue进入组件的HTML元素

Question

here is the situation. Have a component(cmp1) that inside of it uses search bar component (cmp2). My goal is to dig into cmp2 and grab input element to set focus on it when cmp1 renders. How do I achieve it with Vue ? What have I tried so far that worked was to set ref on cmp2 , than through this.$refs.search.$el.firstChild[0].focus() but I realize that this is not an option. So, perhaps you'd help me out with this one. some screenshots attached. Many thanks!

Answer 1

You don't need to manually set these by accessing the child html elements.

If I understand correctly, you want to execute a function of the child triggered by the parent.

1. One way to do that is to have the parent have a loaded state default to false. Pass the state as a prop to the child, and then you can add a watch for this state to the child. When the loaded changes to true, your watch should trigger the desired action.

2. You can complicate things a bit by having an emit in the child pass a function or the input to the parent that you can manage from there.

But as mentioned in the comment, this doesn't need to be a complicated rective situation. I think what may suffice is having a isFocused prop available to the parent.

---

example for #1:

in parent:

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

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

in child/component:

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

example for #2:

to emit a function, you could do this in the child

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

then, in the parent you would use the @onMounted listener to register the function. you would still need to store the function and manage when the function fires from the parent. I think option one is a better choice

Answer 2

1. Create method in search-payment-component and ref input element:

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

   And call this method in parent component with this.$refs.searchComponent.focus() (yes, you should also ref child component to use it).

2. Add prop focused to search-payment-component :

    props: ['focused'], ... watch: { focused(val) { val && this.$refs.input.focus() } } 

   But you should also provide events when focus is lost as best practice.

[UPDATED] OR if you want just focus input on initial rendering:

    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>
    ...

Also if you want to work with child component in mounted hook you should use it in this.$nextTick method to be sure that child component was rendered.