How do Vue public methods call other component methods?

In Vue, component communication is a very critical issue. A component may need to call another component's method to implement its own functions. In this case, we need to use some technical means to achieve communication between components.

Vue provides many methods to implement communication between components, including event bus, Vuex, props, emit, etc. But when we need to call methods of other components in public methods, using these methods may become complicated and troublesome. At this time, we can use $root and $refs on the Vue instance to call other component methods.

$root and $refs are two properties of the Vue instance, which allow us to access another component from one component. $root is the root Vue instance and can access the entire Vue application. $refs is an object that contains all subcomponents with ref attributes.

First, we need to define a method in another component and add a ref attribute to this component in the template. For example:

<template>
  <div>
    <button @click="increment">点击我</button>
  </div>
</template>

<script>
  export default {
    methods: {
      increment() {
        this.$emit('increment')
      }
    }
  }
</script>

Here, we define an increment method and bind it to a button. When the button is clicked, the increment method triggers a custom event 'increment'. At the same time, we specify this component as a child node of its parent component and add a ref attribute to it.

Next, in the parent component, we can access the child component through the $refs attribute and call its method. For example:

<template>
  <div>
    <ChildComponent ref="child" />
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent'

  export default {
    components: {
      ChildComponent
    },
    created() {
      console.log(this.$refs.child)
      this.$refs.child.increment()
    }
  }
</script>

Here, we create a parent component and add a child component ChildComponent in the template. At the same time, we obtain the instance of the child component through this.$refs.child and call its increment method. We call $refs in the created hook because the subcomponent has not been created yet when the mounted hook is used.

In this way, we can easily call methods of other components in public methods. We only need to obtain the corresponding component instance through $root or $refs in the public method, and call its method directly.

It should be noted that $refs is a non-responsive object, and it will only be filled when the component is rendered, so if we need to obtain the instance of the child component before the component is rendered, we can use $children Attributes.

To sum up, calling other components through $root and $refs is a very convenient and practical method. However, we need to pay attention to some details, such as whether the component has been rendered, whether there is a ref attribute, etc. This method can provide a good solution when we need to call other component methods in public methods.

The above is the detailed content of How do Vue public methods call other component methods?. For more information, please follow other related articles on the PHP Chinese website!