1. Routing communication value
Routing communication uses query to bring parameters through routing jump, which is also a common communication method used by vue.
Example: Create and register a component Head on a route
<template>
<div >
<button @click="handleChange">clickMe</button> //Bind button click event </div>
</template>
<script>
export default {
name: 'Head',
data () {
return {
}
},
mounted(){
},
updated(){
},
methods:{
handleChange(){
this.$({ path:"/about" , query:{ text:"I am Argus Shield" } }) //Route jump and use query to bring the parameters }
}
}
</script>
<style scoped>
</style>
Create another component About and register on the route
<template>
<div >
<p>I'm about page:{{ message }}</p><button type="button" @click="handleChange">Back to homepage</button> //Show received data </div>
</template>
<script>
export default {
name: 'About',
data () {
return {
message: ""
}
},
mounted(){
= this.$ //Receive data transmitted during the life cycle },
updated(){
},
methods:{
handleChange(){
this.$({ path: "/" }) //Click to return to homepage }
}
}
</script>
<style scoped>
</style>
Simple code for routing registration
import Vue from 'vue'
import Router from 'vue-router'
import Head from '@/components/Head'
import About from '@/components/About'
(Router)
export default new Router({
mode: "history",
routes: [
{
path: '/',
name: 'Head',
component: Head
},{
path: '/about',
name: 'About',
component: About
}
]
})
2. SessionStorage local cache communication
Let’s take a look at the examples above and just change them slightly, and the routing configurations are the same. The feature of sessionStorage is that the browser will disappear after the cache is turned off, which is different from localStorage.
Example: Head Code:
<template>
<div >
<button @click="handleChange">clickMe</button>
</div>
</template>
<script>
export default {
name: 'Head',
data () {
return {
}
},
updated(){
},
methods:{
handleChange(){
this.$({ path:"/about"})
},
message(){
var message = "I am Argus Shield"
('text', message) //Create cache }
},
mounted(){
();
}
}
</script>
<style scoped>
</style>
About code:
<template>
<div >
<p>I'm about page:{{ message }}</p><button type="button" @click="handleChange">Back to homepage</button>
</div>
</template>
<script>
export default {
name: 'About',
data () {
return {
message: ""
}
},
mounted(){
= ("text") //Read cache },
updated(){
},
methods:{
handleChange(){
this.$({ path: "/" })
}
}
}
</script>
<style scoped>
</style>
3. Parent component communicates with children
To define the parent component head, or use the above example, the parent component passes a sentence to the child component. If there are many parameters passed, you can use the form of json array {}.
Example: Head parent component code
<template>
<div >
<About :text=message></About> //Pass the message parameter to the child component </div>
</template>
<script>
import About from '@/components/'
export default {
name: 'Head',
components:{
About
},
data () {
return {
message : "I am Argus Shield"
}
},
mounted(){
},
methods:{
}
}
</script>
<style scoped>
</style>
About subcomponent code
<template>
<div >
<p>I'm about page:{{ text }}</p>
</div>
</template>
<script>
export default {
name: 'About',
props:{
'text':[] //Subcomponents accept data, [] can write incoming types, if they do not match, an error will be reported },
data () {
return {
message: ""
}
},
mounted(){
},
updated(){
},
methods:{
handleChange(){
}
}
}
</script>
<style scoped>
</style>
4. Children components communicate to parent component. Is the communication between children and parents sent through the emit event? Without further ado, just go to the case directly, or use the above case to modify the code of the child component:
<template>
<div >
<button @click="handleChange">Click to send a message to the parent component</button>
</div>
</template>
<script>
export default {
name: 'About',
props:{
'text':[]
},
data () {
return {
message: ""
}
},
mounted(){
},
updated(){
},
methods:{
handleChange(){
this.$emit( "child-message" , "I am Argus Shield" ) //Submit information }
}
}
</script>
<style scoped>
</style>
Head parent component code
<template>
<div >
<About @child-message = "handleText"></About> //The parent component needs to be caught by a method here. <p>Message from child components：{{message}}</p>
</div>
</template>
<script>
import About from '@/components/'
export default {
name: 'Head',
components:{
About
},
data () {
return {
message : ""
}
},
mounted(){
},
methods:{
handleText(data){ //The data here is the content transmitted from the child component = data
}
}
}
</script>
<style scoped>
</style>
5. VUEX Status Management
State management is relatively complicated to use, but it is indeed very practical for large projects.
(1) Install vuex and create warehouse files
npm install vuex -s
After installation, create the store folder in the src file and create the file. The code is as follows:
import Vue from 'vue';
import Vuex from 'vuex';
(Vuex);
const store = new ({
state: {
message: 'I am Argus Shield'
},
mutations: {
MESSAGE_INFO (state,view) {
= view;
}
}
})
export default store
(2) Register the store repository in the code as follows:
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
= false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
(3) Reading and submitting states. Or use the above case. We change the state by submitting the child component About. The parent component Head accepts the state and displays the following is the About component submission status.
<template>
<div >
<button @click="handleChange">Click to send a message to the parent component</button>
</div>
</template>
<script>
export default {
name: 'About',
props:{
'text':[]
},
data () {
return {
message: ""
}
},
mounted(){
},
updated(){
},
methods:{
handleChange(){
this.$("MESSAGE_INFO" , "I am the train king") //Submit Change Status }
}
}
</script>
<style scoped>
</style>
The head component accepts status:
<template>
<div >
<About></About>
<p>Message from child components：{{this.$}}</p> // Use this.$ directly to accept data display </div>
</template>
<script>
import About from '@/components/'
export default {
name: 'Head',
components:{
About
},
data () {
return {
message : ""
}
},
mounted(){
},
methods:{
}
}
</script>
<style scoped>
</style>
Summary: The above is the communication method in vue. Of course, there are some, such as eventBus, which are suitable for small and medium-sized projects, but I use it less. Generally, the above types are enough in development. The examples are very simple. Learning is endless. You have to work hard to study the official website or other materials for more detailed things. There are any wrong or doubts in this article. I hope you will give me some advice! Thanks.