What are the data transfer methods for Vue component communication?

What are the data transfer methods for Vue component communication?

In Vue development, component communication is a very important part. Through component communication, data transfer and interaction between different components can be achieved. Vue provides a variety of ways to implement component communication, including props, emit, provide/inject, Vuex, etc. This article explains these different data transfer methods and provides corresponding code examples.

1. props and $emit

props are used by the parent component to pass data to the child component, and the child component receives the passed data through props. $emit is used by the child component to pass data to the parent component. The child component triggers events and passes data to the parent component through $emit.

<script><br> import ChildComponent from './ChildComponent'</script>

export default {

components: {
  ChildComponent
},
data() {
  return {
    message: ''
  }
},
methods: {
  updateMessage(newMessage) {
    this.message = newMessage
  }
}

}

<script><br> export default {</script>

data() {
  return {
    message: ''
  }
},
methods: {
  sendMessage() {
    this.$emit('update', this.message)
  }
}

}
script>

2. provide/inject

provide and inject are a pair of options for passing data across hierarchical components. Data is provided through the parent component and data is injected into the child component. accomplish. The provide option provides data, and the inject option injects data.

<script><br> import ChildComponent from './ChildComponent'</script>

export default {

components: {
  ChildComponent
},
provide() {
  return {
    message: 'Hello World!'
  }
}

}

<script><br> export default {</script>

inject: ['message']

}
script>

3. Vuex

Vuex is the state management mode officially provided by Vue, which is used to centrally manage data shared between components. Data transfer and interaction between components are realized through Vuex's state, getters, mutations, actions, etc.

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
state: {

message: 'Hello World!'

},
getters: {

getMessage: state => state.message

},
mutations: {

updateMessage(state, newMessage) {
  state.message = newMessage
}

},
actions: {

changeMessage({ commit }, payload) {
  commit('updateMessage', payload)
}

}
})

// ParentComponent.vue

<script><br> import ChildComponent from './ChildComponent'<br> import { mapGetters, mapActions } from 'vuex'</script>

export default {

components: {
  ChildComponent
},
computed: {
  ...mapGetters(['getMessage']),
  message() {
    return this.getMessage
  }
},
methods: {
  ...mapActions(['changeMessage'])
}

}

// ChildComponent.vue

<script><br> import { mapGetters } from 'vuex'</script>

export default {

computed: {
  ...mapGetters(['getMessage']),
  message() {
    return this.getMessage
  }
}

}

The above are several common data transfer methods for Vue component communication. Each method has its own applicable scenarios. Choose the appropriate one according to actual needs. method for data transfer. By rationally using these methods, flexible and efficient communication between components can be achieved, improving development efficiency and code quality.

The above is the detailed content of What are the data transfer methods for Vue component communication?. For more information, please follow other related articles on the PHP Chinese website!