Detailed explanation of Vue's seven value transfer methods

Detailed explanation of Vue's seven value transfer methods

1. From father to son

Define the props field in the child component, and the type is array (if you need to limit the field value type, you can also define it in the form of an object). As shown in the example below, the parent component mounts the child component HelloWorld , assigns a value title on the component tag, and the child component HelloWorld defines props , which contains a value called title , so that the child 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 Music",
 };
 },
 components:
 HelloWorld,
 },
};
</script>

Subcomponents

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

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

2. Son to Father

To pass a value from child to parent, you need to trigger an event in the child component. In the event, call $emit('父組件的方法名', '傳遞的值') , and then receive the passed value in the parent component through a custom event.

Subcomponents

<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 Music",
 };
 },

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

3. Brother component value transfer

1. First create a bus.js file, new a Vue instance in bus.js to act as the middle layer for transmitting data.

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

2. Introduce bus.js into component A and pass parameters through bus.$emit('事件名','參數')

<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. Use $on('事件名', function(){}) to receive in the mounted cycle of component B

<template>
 <div id='swiper'>
 <button>I am a 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 components use data and methods of child components

1. Write the ref attribute on the subcomponent tag

2. The parent component can access the child component through this.$refs.id.方法名or this.$refs.id.屬性名.

Parent Component

<template>
 <div>
 <HelloWorld :title="msg" ref="hello" />
 <button @click="parentEvent">I am a father</button>
 </div>
</template>

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

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

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

Subcomponents

<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 child component");
 }
 },
};
</script>

5. Child components use the data and methods of parent components

In a child component, you can use $parent to access the data and methods of its parent component. If it is multi-nested, you can also use multiple layers of $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 Music",
 };
 },

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

Subcomponents

<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.$parent.msg)
  this.$parent.parentEvent();
 }
 },
};
</script>

6. Vuex value transfer

Vuex is a state management pattern developed specifically for Vue.js applications. It uses centralized storage to manage the status of all components of an application and uses corresponding rules to ensure that the status changes in a predictable manner. Generally, it is not needed for small projects.

6.1, define the store

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
 state: {
 school: "Tsinghua University",
 a:"nice"
 },
 getters: {
 returnVal(state) {
  return state.school + state.a;
 },
 },
 mutations:
 changeSchool(state, val) {
  state.school = val;
  console.log('Modification successful');
 },
 },
 actions: {},
 modules: {}
});

6.2, Mount

import Vue from 'vue';
import App from './App.vue';
import router from "./router";
import store from "./store";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import publicFn from "./publicFn/publicFn";

Vue.config.productionTip = false


const url = process.env.VUE_APP_URL;
Vue.prototype.$url = url;
Vue.prototype.$publicFn = publicFn;

Vue.use(ElementUI);

new Vue({
 router,
 store,
 render: h => h(App),
}).$mount('#app')

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 the value//this.$store.commit('changeSchool', 'Peking University');//Modify the value// console.log(this.$store.getters.returnVal)//Get the filtered value}
 },
};
</script>

7. Routing value

7.1 Passing values ​​through query

Note: This method will not lose the page refresh parameters, and will display the parameters after the address bar, http://localhost:9000/#/conter?id=10086&name=%E9%B9%8F%E5%A4%9A%E5%A4%9A

Page A

<template>
 <div>
 <HelloWorld :title="msg" ref="hello" />
 <button @click="parentEvent">Jump</button>
 </div>
</template>

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

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

 methods: {
 parentEvent() {
  this.$router.push({
  path:"/conter",
  name:'conter',
  query:{
   id:10086,
   name:"Peng Duoduo"
  }
  })
 },
 },
 components:
 HelloWorld
 },
};
</script>

Page B

<template>
 <div id='conter'>

 </div>
</template>

<script>

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

 }
 },
 created (){
 console.log(this.$route.query.id, this.$route.query.name);
 },
}
</script>

7.2 Passing values ​​via params

Note: When refreshing the page in this way, the parameters will be lost, but they can be received and stored in sessionStorage .

A-page

<template>
 <div>
 <HelloWorld :title="msg" ref="hello" />
 <button @click="parentEvent">Jump</button>
 </div>
</template>

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

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

 methods: {
 parentEvent() {
  this.$router.push({
  path:"/conter",
  name:"conter",
  params:{
   id:10086,
   name:"Peng Duoduo"
  }
  })
 },
 },
 components:
 HelloWorld
 },
};
</script>

Page B

<template>
 <div id='conter'>

 </div>
</template>

<script>

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

 }
 },
 created (){
 console.log(this.$route.params.id, this.$route.params.name);
 },
}
</script>

This concludes this article about Vue's seven value-transferring methods. For more information about Vue's value-transferring methods, please search 123WORDPRESS.COM's previous articles or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • A brief discussion on Vue3 father-son value transfer
  • Detailed explanation of Vue parent-child component value transfer and one-way data flow issues
  • Vue parent-child component mutual value transfer and call
  • Some pitfalls of Vue parent-child component value transfer
  • Example of passing values ​​between vue child components and parent components
  • Vue father-son value transfer, brother value transfer, child-father value transfer detailed explanation

<<:  Install OpenSSH on Windows and log in to the Linux server by generating an SSH key

>>:  Detailed explanation of the basic usage of SSH's ssh-keygen command

Recommend

How to implement dual-machine master and backup with Nginx+Keepalived

Preface First, let me introduce Keepalived, which...

HTML pop-up div is very useful to realize mobile centering

Copy code The code is as follows: <!DOCTYPE ht...

How to install MySQL 8.0 and log in to MySQL on MacOS

Follow the official tutorial, download the instal...

Implementation example of Docker deployment of front-end and back-end separation projects

Table of contents 1. Environmental Preparation 2....

Detailed explanation of the basic knowledge of front-end componentization

Table of contents Basic concepts of components Th...

Centos6.9 installation Mysql5.7.18 step record

Installation sequence rpm -ivh mysql-community-co...

Causes and solutions for MySQL deadlock

The database, like the operating system, is a sha...

Detailed steps to install VMware Tools from scratch (graphic tutorial)

VMware Tools is a tool that comes with VMware vir...

Solve the problem of docker container exiting immediately after starting

Recently I was looking at how Docker allows conta...

Solve the error problem caused by modifying mysql data_dir

Today, I set up a newly purchased Alibaba Cloud E...

CocosCreator Getting Started Tutorial: Making Your First Game with TS

Table of contents premise TypeScript vs JavaScrip...

Examples of importing and exporting MySQL table data

This article describes the import and export oper...

The order of event execution in the node event loop

Table of contents Event Loop Browser environment ...

Detailed explanation of TS numeric separators and stricter class attribute checks

Table of contents Overview in operator refinement...

MYSQL8.0.13 free installation version configuration tutorial example detailed explanation

1. Download, I take 8.0 as an example Download ad...