Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities.

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

Hello! Dear friends of the Nuggets, I wrote a technical article about # Vue export import yesterday. I hope you can preview it and give me more suggestions and support. Thank you! Today’s article is about the various methods of transferring values between VUE components; On the Internet to find a lot of relevant articles or documents summed up; Hopefully useful to you;

The text begins ~

Parent component passing value to child component (most used)

implementation

1. In Vue, the parent component can use props to pass data to the child component. (data type can be a Number, a String, Boolearn, Array, Object)

Subcomponent section codedialog.vue

<template> <div> <h2> <div v-if="showCode" class="Qr"> <img: SRC ="currentInfo.code_img" Alt ="" > <h5>{{ currentInfo.nickname }}</h5> </div> <div> <span>{{ num }}</span> <span>{{ content }}</span> </div> <div> <span v-for="(item, index) in isArray" :key="index">{{ item }}</span> </div> </div> </template> <script> export default { props: { showCode: { type: Boolean, default: false }, num:{ type:Number, defalut:0 }, content:{ type:String, defalut:'' }, currentInfo: { type: Object, default: () => {} }, isArray:{ type:Array, defalut: ()=> [] } } } </script>Copy the code

The parent component part index.vue

<template> <div> <h1> Parent component </h1> <code-dialog :num="num" :context="context" :showCode="isShow" :isArray="isArray" :currentInfo="currentInfo" /> <! -- <code-dialog ></code-dialog> --> </div> </template> <script> import codeDialog from '.. /.. /components/codeDialog.vue' export default { components: { codeDialog }, data(){ return{ num:2, context: "Introduction of subcomponents," isShow: true, isArray: [" beans, red beans, mung beans, black beans, peas, "], currentInfo: {nickname: "love guest customer service commissioner," code_img: require("@/assets/img/consult/07.png") } } } } </script>Copy the code

rendering

The preview looks like this

Child components pass values to parent components

implementation

In Vue, a child component can use $emit to pass data to its parent

Subcomponent part

<template> <div> <h2> <img @click="childEvent" : SRC ="currentInfo.code_img" Alt ="" > </div> </template> <script> Export default {methods:{childEvent(){this.$emit('showClick',' child to parent ')}}} </script>Copy the code

Parent component part

<template> <div> <h1> <child :num="num" :context="context" :showCode="isShow" :isArray="isArray" :currentInfo="currentInfo" @showClick="showText" /> <div>{{message}}</div> </div> </template> <script> export default { data(){ return{ message:'' } }, methods:{ showText(e){ this.message=e } } } </script>Copy the code

rendering

Bus. Js spread value

Implementation method:

You need the same VUE instance to call both methods, so create a hub; Use bus.emit to emit, bus.emit to emit, bus.emit to emit, bus.on to receive

Application scenarios

The method that one page calls another page

It can also be used to pass values to sibling components

For example, my order module similar to Taobao or Pinduoduo will enter certain order list to confirm receipt of goods from order status classification on the first-level page; Then exit to update the display of unconfirmed received quantities;

(1) Create a bus.js file

import Vue from 'vue';
export defalut new Vue ;
Copy the code

(2) The page that needs to trigger the value transfer is removed from this page

< the template > < div > < h2 > from this page to leave (triggered by value) < / h2 > < div class = "Qr" > < img SRC = ".. PNG "Alt ="" /> </div> </div> </template> <script> import bus from './bus' export default {data(){return{} {}, beforeDestroy () bus $emit (' MSG ', 'I will value a another page')},} < / script >Copy the code

(3) The page that needs to receive the value goes from this page to the above page; Return to this page

< the template > < div > < h1 @ click = "$router. Push ('/child ')" > receive from another page value < / h1 > < div > {{message}} < / div > < / div > < / template > <script> import bus from "./bus"; export default { data() { return { message: "" }; }, created() { bus.$on("msg", (val)=>{ this.message = val }); }}; </script>Copy the code

rendering

Take a look at the effect picture of the transfer process

Sibling component method call

implementation

Introduce two child components (child,child1) in the parent component, and call a method in the child component in child1

Echo this.$emit(‘fun’) to the parent in child1

In the parent component, bind the child component with a ref =”childFirst” attribute

Define the function method in methods to make this.$refs.childfirst. A method ()

Parent component part

<template>
  <div>
    <div>{{ message }}</div>
    <child ref="childFrist"></child>
    <child1 @save="save"></child1>
  </div>
</template>
<script>
import child from "./child.vue";
import child1 from "./child1.vue"
export default {
    components:{
        child,
        child1
    },
  methods:{
      save(){
          this.$refs.childFrist.fristEvent()
      }
  }
};
</script>
Copy the code

Subcomponent part

Child component <template> <div> <h2> The first child </h2> </div> </template> <script> export default {methods:{fristEvent(){ Console. log(' first child; Here the list interface method is usually called '); }, }} < / script > -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- child1 component part of < the template > < div > </h2> <div class="Qr" @click="imgClick"> <img SRC =".. PNG "Alt ="" /> </div> </div> </template> <script> export default{methods:{imgClick(){this.$emit('save')} } } </script>Copy the code

rendering

conclusion

Good article to the end of this again, feel that every time they write a new technical article, is equal to the article’s front-end knowledge review again; I have a bad memory and always forget grammar; To put it bluntly, to forget grammar is to use it less; Hope to write this article useful to you; We also hope that you can give more suggestions and support; Thank you very much!

“Welcome to the discussion in the comments section. The excavation authorities will draw 100 nuggets in the comments section after project Diggnation. See the event article for details.”