Preface
In Vue development, data transfer between pages is a common requirement. In order to achieve interaction and data transmission between pages, Vue provides a variety of ways for developers to use. This article will introduce in detail the various ways to pass values on pages in Vue, helping you select the appropriate method for data transfer based on the specific scenario.
1. Transfer parameters through routing
Vue routing is a common way of page navigation and parameter delivery. Parameters can be passed between pages by routing.
Passing values through routing parameters: Data can be passed through dynamic parameters of routes or query parameters. Set parameters on the source page, and then access parameters on the target page via $ or $.
Sample code:
//Routing configurationconst router = new VueRouter({
routes: [
{
path: '/source/:id',
component: SourceComponent,
},
// Other routing configurations... ],
});
// Source page<template>
<router-link :to="{ path: '/source/1' }">Jump to the target page</router-link>
</template>
// Target page<template>
<div>
<p>Values passed by parameters：{{ $ }}</p>
</div>
</template>Passing values through routing status: Data can be passed through routing status objects. Set the status object on the source page, and then access the status object via $ on the destination page.
Sample code:
//Routing configurationconst router = new VueRouter({
routes: [
{
path: '/source',
component: SourceComponent,
meta: {
data: {
id: 1,
name: 'John',
},
},
},
// Other routing configurations... ],
});
// Target page<template>
<div>
<p>Values passed by parameters：{{ $ }}</p>
</div>
</template>2. Status management through Vuex
Vuex is a state management tool for Vue. By defining and managing states in Vuex, data can be shared and passed between different pages.
Set status values on the source page: Modify the status values in Vuex by submitting the mutation of Vuex in the component of the source page.
Sample code:
// Vuex configurationconst store = new ({
state: {
value: '',
},
mutations: {
setValue(state, value) {
= value;
},
},
});
// Source page<template>
<div>
<input v-model="value" />
<button @click="setValue">Pass parameters</button>
</div>
</template>
<script>
export default {
data() {
return {
value: '',
};
},
methods: {
setValue() {
this.$('setValue', );
},
},
};
</script>3. Pass the value through the Props attribute
In Vue, passing data to child components through parent components is a common way of passing values. You can declare the data to be received in the props attribute of the child component, and then pass the data to the child component in the parent component by binding the attribute.
Sample code:
// Subcomponents<template>
<div>
<p>Values passed by parameters：{{ value }}</p>
</div>
</template>
<script>
export default {
props: {
value: {
type: String,
required: true,
},
},
};
</script>
// Parent component<template>
<div>
<child-component :value="data"></child-component>
</div>
</template>
<script>
import ChildComponent from './';
export default {
components: {
ChildComponent,
},
data() {
return {
data: 'Passed Value',
};
},
};
</script>4. Pass data through events
In Vue, data can be passed between components through custom events. The event can be triggered by defining the event in the parent component, then in the child component through the $emit method, and passing the data.
Sample code:
// Subcomponents<template>
<div>
<button @click="handleClick">Pass parameters</button>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
this.$emit('event-name', 'Passed Value');
},
},
};
</script>
// Parent component<template>
<div>
<child-component @event-name="handleEvent"></child-component>
</div>
</template>
<script>
import ChildComponent from './';
export default {
components: {
ChildComponent,
},
methods: {
handleEvent(value) {
(value); // Output: passed value },
},
};
</script>Summarize
Passing data through routing parameters, Vuex state management, Props properties, and events is a common way of page transfer values in Vue. Depending on the specific scenario and needs, choosing the right method can achieve flexible data transfer and interaction between pages.
This is the end of this article about the various ways to pass values in Vue. For more related content on Vue pages, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!