Vue component communication: use $root for root component communication

Vue component communication: Use $root for root component communication

In Vue applications, component communication is a very common requirement. Vue provides a variety of ways to implement communication between components, such as using props, $emit, $on, etc. In some scenarios, we may need to conduct relatively complex communication between various components. In this case, using the $root attribute can help us simplify the communication process.

$root is the root instance of the Vue instance. We can operate and access the root instance by accessing this property in the component. Through $root, we can easily communicate between different components.

Suppose we have a simple Vue application, including a root component App and two sub-components Child1 and Child2. Our goal is to change the data of the Child2 component in the Child1 component.

First, define the Child1 and Child2 components in App.vue, and introduce them respectively in the template:

<template>
  <div>
    <Child1></Child1>
    <Child2></Child2>
  </div>
</template>

<script>
import Child1 from './components/Child1.vue'
import Child2 from './components/Child2.vue'

export default {
  components: {
    Child1,
    Child2
  }
}
</script>

There is a button in the Child1 component. After clicking the button, the data of the Child2 component needs to be changed. . We can access and manipulate the data of the Child2 component by using the $root attribute in the methods of the Child1 component:

<template>
  <div>
    <button @click="changeData">改变Child2数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeData() {
      this.$root.$emit('changeChild2Data', '新的数据') // 发送事件，传递数据
    }
  }
}
</script>

In the Child2 component, we use the created life cycle hook function to listen to the changeChild2Data event, and when the event is triggered Update the component's data:

<template>
  <div>
    <p>Child2数据：{{ child2Data }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      child2Data: ''
    }
  },
  created() {
    this.$root.$on('changeChild2Data', data => {
      this.child2Data = data // 更新组件数据
    })
  }
}
</script>

In this way, when we click the button in the Child1 component, the changeChild2Data event will be triggered and new data will be passed. After the Child2 component listens to the event, it updates the value of child2Data and re-renders the page, thus realizing communication between child components.

The advantage of using $root for root component communication is that its usage is relatively simple and direct. There is no need to care about the hierarchical relationship between parent and child components, and it avoids the cumbersome props and $emit transfer process. At the same time, the global nature of $root also makes it play a relay role between multiple components, facilitating the implementation of complex communication logic between components. However, excessive use of $root may cause some problems. For example, the dependencies between components will be confusing, and debugging and maintenance may be difficult.

In summary, using $root for root component communication is a convenient and fast way, but in actual use, evaluation and selection need to be made based on specific circumstances. I hope this article can help you understand and apply the communication mechanism of Vue components.

The above is the detailed content of Vue component communication: use $root for root component communication. For more information, please follow other related articles on the PHP Chinese website!