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.

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<child-component :message="message" @update="updateMessage"></child-component>
<p>父组件收到子组件传递过来的数据：{{message}}</p>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
import ChildComponent from './ChildComponent'

export default {

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

}
2cacc6d41bbb37262a98f745aa00fbf0

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<input type="text" v-model="message" />
<button @click="sendMessage">传递数据给父组件</button>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {

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

}
3fa3f474cbb4b6d948eebecb1be5dde4

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.

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<p>父组件提供数据：{{message}}</p>
<child-component></child-component>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
import ChildComponent from './ChildComponent'

export default {

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

}
2cacc6d41bbb37262a98f745aa00fbf0

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<p>子组件注入数据：{{message}}</p>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {

inject: ['message']

}
3fa3f474cbb4b6d948eebecb1be5dde4

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
d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<child-component></child-component>
<p>父组件获取数据：{{message}}</p>
<button @click="changeMessage">更改数据</button>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
import ChildComponent from './ChildComponent'
import { mapGetters, mapActions } from 'vuex'

export default {

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

}
2cacc6d41bbb37262a98f745aa00fbf0

// ChildComponent.vue
d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<p>子组件获取数据：{{message}}</p>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
import { mapGetters } from 'vuex'

export default {

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

}
2cacc6d41bbb37262a98f745aa00fbf0

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!