Data method sharing between vue components

With the popularity of Vue, Vue components are used more and more widely. However, dealing with data and method sharing between Vue components remains an important challenge. In this article, I will discuss some best practices for handling data and method sharing between Vue components.

Component communication method

Component communication is the most common scenario in Vue. In Vue, component communication can pass data from parent components to child components, or from child components to parent components. At the same time, subcomponents can also communicate with each other and share data and methods.

Parent-child component communication

Transmitting data from the parent component to the child component can be achieved through the props attribute. Through the props attribute, data defined in the parent component can be passed to the child component. In child components, the passed data can be received and processed through props attributes.

At the same time, Vue also provides a $emit() method for passing data from child components to parent components. The $emit() method can trigger custom events registered in the parent component and pass data to the parent component as parameters. In the parent component, you can listen to custom events and process data through the v-on directive registered on the child component.

Communication between subcomponents

When we need to share data and methods between two subcomponents, we can use Vue instances or Vue plug-ins to achieve this.

Using Vue instances

We can define a global event bus in the Vue instance for communication between different components.

// main.js
import Vue from 'vue'
export const EventBus = new Vue()

// component1.vue
import { EventBus } from '@/main.js'
export default {
  mounted() {
    EventBus.$emit('dataChanged', this.data)
  }
}

// component2.vue
import { EventBus } from '@/main.js'
export default {
  data() {
    return {
      data: null
    }
  },
  mounted() {
    EventBus.$on('dataChanged', (data) => {
      this.data = data
    })
  }
}

In the above code, we define a global Vue instance object EventBus in the main.js file. The subcomponent component1 triggers a custom event in the mounted life cycle hook and passes a data parameter.

The subcomponent component2 defines a data attribute in the data option, which is used to receive the data passed from the component1 component. In the mounted life cycle hook of the component, we listen to the custom event through the EventBus.$on() method and update the value of the data attribute when the event is triggered. In this way, we can share data and method calls between different components.

Using Vue plug-ins

In addition to using Vue instances, we can also use Vue plug-ins to implement communication between components. Vue plugins are a very practical way for Vue.js to extend the functionality of an application and be used in various components of the application.

We can use the Vue plug-in to create a global plug-in and define some data and methods in the plug-in to make it accessible throughout the application. This enables data sharing and method calls between different components. The following is a sample code:

// plugins/MyPlugin.js
const MyPlugin = {}
MyPlugin.install = function (Vue, options) {
  Vue.myGlobalMethod = function () {
    console.log('MyPlugin is working')
  }

  Vue.prototype.$myMethod = function (data) {
    console.log('MyPlugin data: ' + data)
  }
}

export default MyPlugin

// main.js
import Vue from 'vue'
import MyPlugin from '@/plugins/MyPlugin'
Vue.use(MyPlugin)

// component1.vue
export default {
  mounted() {
    this.$myMethod(this.data)
  }
}

// component2.vue
export default {
  mounted() {
    Vue.myGlobalMethod()
  }
}

In the above example, we defined a MyPlugin plug-in and created two methods: Vue.myGlobalMethod and Vue.prototype.$myMethod. In the MyPlugin plug-in, we register the plug-in as a global plug-in for Vue through the Vue.use() method.

In the subcomponent component1, we call the $myMethod method defined in the MyPlugin plug-in through this.$myMethod() method and pass a data parameter. In the subcomponent component2, we call the myGlobalMethod method defined in the MyPlugin plug-in through the Vue.myGlobalMethod() method. In this way, we can share data and method calls between different components.

Summary

In Vue, sharing data and methods between components is a very common scenario. This article introduces the use of props attributes, $emit() method, Vue instances and Vue plug-ins to deal with data and method sharing issues between components. These best practices can help us easily handle communication issues between components and improve the maintainability and scalability of our applications.

The above is the detailed content of Data method sharing between vue components. For more information, please follow other related articles on the PHP Chinese website!