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'</p><p>export default {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>components: { ChildComponent }, data() { return { message: '' } }, methods: { updateMessage(newMessage) { this.message = newMessage } }</pre><div class="contentsignin">Copy after login</div></div><p>}<br></script>

<script><br> export default {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>data() { return { message: '' } }, methods: { sendMessage() { this.$emit('update', this.message) } }</pre><div class="contentsignin">Copy after login</div></div><p>}<br></ script></p><ol start="2"><li>provide/inject</li></ol><p>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. </p><p><template><br> <div></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;p&gt;父组件提供数据：{{message}}&lt;/p&gt; &lt;child-component&gt;&lt;/child-component&gt;</pre><div class="contentsignin">Copy after login</div></div><p></div><br></template></p><p><script><br> import ChildComponent from './ChildComponent'</p><p>export default {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>components: { ChildComponent }, provide() { return { message: 'Hello World!' } }</pre><div class="contentsignin">Copy after login</div></div><p>}<br></script>

<script><br> export default {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>inject: ['message']</pre><div class="contentsignin">Copy after login</div></div><p>}<br></ script></p><ol start="3"><li>Vuex</li></ol><p>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. </p><p>// store.js<br>import Vue from 'vue'<br>import Vuex from 'vuex'</p><p>Vue.use(Vuex)</p><p>export default new Vuex.Store({<br> state: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>message: 'Hello World!'</pre><div class="contentsignin">Copy after login</div></div><p>},<br> getters: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>getMessage: state =&gt; state.message</pre><div class="contentsignin">Copy after login</div></div><p>},<br> mutations: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>updateMessage(state, newMessage) { state.message = newMessage }</pre><div class="contentsignin">Copy after login</div></div><p>}, <br> actions: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>changeMessage({ commit }, payload) { commit('updateMessage', payload) }</pre><div class="contentsignin">Copy after login</div></div><p>}<br>})</p><p>// ParentComponent.vue<br><template><br> <div></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;child-component&gt;&lt;/child-component&gt; &lt;p&gt;父组件获取数据：{{message}}&lt;/p&gt; &lt;button @click=&quot;changeMessage&quot;&gt;更改数据&lt;/button&gt;</pre><div class="contentsignin">Copy after login</div></div><p></div><br></template></p><p><script><br> import ChildComponent from './ChildComponent'<br> import { mapGetters, mapActions } from 'vuex'</p><p>export default {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>components: { ChildComponent }, computed: { ...mapGetters(['getMessage']), message() { return this.getMessage } }, methods: { ...mapActions(['changeMessage']) }</pre><div class="contentsignin">Copy after login</div></div><p>}<br></script>

// ChildComponent.vue

<script><br> import { mapGetters } from 'vuex'</p><p>export default {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>computed: { ...mapGetters(['getMessage']), message() { return this.getMessage } }</pre><div class="contentsignin">Copy after login</div></div><p>}<br></script>

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!