Of Stack

Detailed explanation of seven value transfer modes of Vue

  • 2021-10-27 06:22:31
  • OfStack

1. Father-to-son

Subcomponent defined in the props Field, which is an array of type (or an object if you want to limit the type of field value). In the example shown in the following figure, the parent component mounts the child component HelloWorld On the component label, give title Assignment, subcomponent HelloWorld Definition props In which there is a value of title So that the component can use the value of the parent component.

Parent component 


<template>
 <div>
 <HelloWorld :title="msg" />
 </div>
</template>

<script>
import HelloWorld from "../components/HelloWorld.vue";

export default {
 name: "Home",
 data() {
 return {
  msg: " Search for music ",
 };
 },
 components: {
 HelloWorld,
 },
};
</script>

Subcomponent 


<template>
 <div class="hello">
 <h1>{{ title }}</h1>
 </div>
</template>

<script>
export default {
 name: "HelloWorld",
 props:["title"],
 data() {
 return {};
 },
};
</script>

2. Pass on the son to the father

Child to parent, need to trigger an event in the child component, in the event, call $emit('父组件的方法名', '传递的值') And then in the parent component, the passed value is received through a custom event.

Subcomponent 


<template>
 <div class="hello">
 <h1 @click="add">{{ title }}</h1>
 </div>
</template>

<script>
export default {
 name: "HelloWorld",
 props: ["title"],
 data() {
 return {
  age:18
 };
 },
 methods: {
 add(){
  this.$emit("childEvent", this.age);
 }
 },
};
</script>

Parent component 


<template>
 <div>
 <HelloWorld @childEvent="parentEvent" :title="msg" />
 </div>
</template>

<script>
import HelloWorld from "../components/HelloWorld.vue";

export default {
 name: "Home",
 data() {
 return {
  msg: " Search for music ",
 };
 },

 methods: {
 parentEvent(e) {
  console.log(e);
 },
 },
 components: {
 HelloWorld,
 },
};
</script>

3. Value transfer from sibling components

1. Create a new one first bus.js File, in bus.js Li new 1 HelloWorld0 Instance that acts as an intermediate layer for transmitting data. 


import Vue from 'vue';
export default new Vue;

2. Introduce in component A bus.js , through bus.$emit('事件名','参数') Transfer parameter 


<template>
 <div class="hello">
 <h1 @click="add">{{ title }}</h1>
 </div>
</template>

<script>
import bus from "../publicFn/bus.js";

export default {
 name: "HelloWorld",
 props: ["title"],
 data() {
 return {
  age:18
 };
 },
 methods: {
 add(){
  bus.$emit("childEvent", this.age);
 }
 },
};
</script>

3. In B component mounted Used in the cycle $on('事件名', function(){}) Receive 


<template>
 <div id='swiper'>
 <button> I'm the button </button>
 </div>
</template>

<script>

import bus from "../publicFn/bus.js";

export default {
 name:'Swiper',
 data (){
 return {

 }
 },
 mounted(){
 bus.$on("childEvent", (e) => {
  console.log(e)
 })
 }
}
</script>

4. Parent component uses data and methods of child component

1. Write on the subcomponent label ref Attribute

2. The parent component passes through this.$refs.id.方法名 Or this.$refs.id.属性名 You can access child components in the way of.

Parent component 


<template>
 <div>
 <HelloWorld :title="msg" ref="hello" />
 <button @click="parentEvent"> I'm the father </button>
 </div>
</template>

<script>
import HelloWorld from "../components/HelloWorld.vue";

export default {
 name: "Home",
 data() {
 return {
  msg: " Search for music ",
 };
 },

 methods: {
 parentEvent() {
  this.$refs.hello.add();
  console.log(this.$refs.hello.age);
 },
 },
 components: {
 HelloWorld
 },
};
</script>

Subcomponent 


<template>
 <div class="hello">
 <h1>{{ title }}</h1>
 </div>
</template>

<script>
export default {
 name: "HelloWorld",
 props: ["title"],
 data() {
 return {
  age:18
 };
 },
 methods: {
 add(){
  console.log(" I am a subcomponent ");
 }
 },
};
</script>

5. The child component uses the data and methods of the parent component

In subcomponents, you can use the $parent Access the data and methods of its parent component, and if it is multiple nested, you can also use multiple layers $parent .

Parent component 


<template>
 <div>
 <HelloWorld :title="msg" ref="hello" />
 </div>
</template>

<script>
import HelloWorld from "../components/HelloWorld.vue";

export default {
 name: "Home",
 data() {
 return {
  msg: " Search for music ",
 };
 },

 methods: {
 parentEvent() {
  console.log(" I am the method of the parent component ");
 },
 },
 components: {
 HelloWorld
 },
};
</script>

Subcomponent 


<template>
 <div class="hello">
 <h1>{{ title }}</h1>
 </div>
</template>

<script>
export default {
 name: "HelloWorld",
 props:["title"],
 data() {
 return {};
 },
};
</script>
0

6. Vuex value transmission

title0 Is a special for title1 State management mode of application development. It adopts centralized storage to manage the states of all components of the application, and ensures that the states change in a predictable way with corresponding rules. 1 small projects do not need to be used.

6.1. Defining store 


<template>
 <div class="hello">
 <h1>{{ title }}</h1>
 </div>
</template>

<script>
export default {
 name: "HelloWorld",
 props:["title"],
 data() {
 return {};
 },
};
</script>
1

6.2. Mount 


<template>
 <div class="hello">
 <h1>{{ title }}</h1>
 </div>
</template>

<script>
export default {
 name: "HelloWorld",
 props:["title"],
 data() {
 return {};
 },
};
</script>
2

6.3. Use 


<template>
 <div class="hello">
 <h1 @click="add">{{ title }}</h1>
 </div>
</template>

<script>
export default {
 name: "HelloWorld",
 props: ["title"],
 data() {
 return {
  age:18
 };
 },
 methods: {
 add(){
  console.log(this.$store.state.school);// Get a value 
  //this.$store.commit('changeSchool', ' Peking University ');// Modified value 
  // console.log(this.$store.getters.returnVal)// Get the filtered value 
 }
 },
};
</script>

7. Routing value transfer

7.1 Value Pass through query

Note: The parameters of refreshing the page in this way are not lost, and the parameters will be exposed after the address bar. http://localhost:9000/#/conter?id=10086&name=%E9%B9%8F%E5%A4%9A%E5%A4%9A

Page A 


<template>
 <div class="hello">
 <h1>{{ title }}</h1>
 </div>
</template>

<script>
export default {
 name: "HelloWorld",
 props:["title"],
 data() {
 return {};
 },
};
</script>
4

Page B 


<template>
 <div class="hello">
 <h1>{{ title }}</h1>
 </div>
</template>

<script>
export default {
 name: "HelloWorld",
 props:["title"],
 data() {
 return {};
 },
};
</script>
5

7.2 Value Pass through params

Note: Refresh page parameters in this way will be lost, and can exist after receiving sessionStorage .

A page 


<template>
 <div class="hello">
 <h1>{{ title }}</h1>
 </div>
</template>

<script>
export default {
 name: "HelloWorld",
 props:["title"],
 data() {
 return {};
 },
};
</script>
6

B page 


<template>
 <div class="hello">
 <h1>{{ title }}</h1>
 </div>
</template>

<script>
export default {
 name: "HelloWorld",
 props:["title"],
 data() {
 return {};
 },
};
</script>
7
Related articles: