Value transfer between Vue components

---

There are three main types of value transfer between Vue components:

• Parent componentPass value toSubcomponents

• SubcomponentsPass value toParent component

• assemblyValue transfer between

  ---

1. The parent component passes the value to the child component

adoptpropsValue transmission

The parent component passes the value to the child component, which is mainly customized by the componentpropsProperty, which is used to receive data passed from the parent component,propsThere are two types of values: one is string array; The other is the object,propsData and components declared indatafunctionreturnThe main difference between our data ispropsFrom the parent, anddataThe data in is the component’s own data, and the scope is the component itself. Both data can be in the templatetemplateAnd calculation propertiescomputedAnd methodsmethodsUsed in

---

• Parent componentparent.vuefile

<template>
    <div>
        Value passed by parent component: {MSG}}
        <!--  The data in the parent component is transferred to the child component for use -- > by means of custom attributes
        <Child :msgFromParent="msg"></Child>
    </div>
</template>

<script>
import Child from "./Child.vue"

export default {
    data() {
        return {
            msg: "parent data"
        }
    },
    components: {
        Child
    }
};
</script>

<style scoped>
.parent-container {
    width: 500px;
    height: 100px;
    background-color: rgb(235, 138, 138);
    color: #fff;
    font-size: 24px;
    text-align: center;
}
</style>

• SubcomponentsChild.vuefile

<template>
    <div>
        Receive value passed by parent component: {msgfromparent}}
    </div>
</template>

<script>
export default {
    //Accept data passed by parent component
    props: ["msgFromParent"]
}
</script>

<style scoped>
</style>

---

2. Pass values from child components to parent components

adopt$emitValue transmission

VueMiddle pair$emitDefined as:
vm.$emit( eventName, […args] )

• Parameters:
  {string} eventName
[...args]
  Triggers an event on the current instance. Additional parameters are passed to the listener callback

The child component passes values to the parent component mainly through user-defined events$emitTo finish,$emitThe first parameter is the custom event, and the second parameter is the value to be passed to the parent component. The parent component binds the custom event to the child component to receive the data passed by the child component

---

• Parent componentparent.vuefile

<template>
  <div>
    Value passed by subcomponent: {info}}
    //Bind custom events to subcomponents to receive the data passed by subcomponents
    <Child @getInfo="getData"></Child>
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  data() {
    return {
      info: "",
    };
  },
  components: {
    Child,
  },
  methods: {
    getData(info) {
      this.info = info;
    },
  },
};
</script>

<style scoped>
</style>

• SubcomponentsChild.vuefile

<template>
  <div>
    Subcomponent transfer data: {info}}
    //Click transfer data to parent component
    <p>< button @ Click = "sendparent" > Click to transfer data to parent component < / button ></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: "child data",
    };
  },
  methods: {
    //The child component triggers a custom event through $emit to pass a value to the parent component
    sendParent() {
      this.$emit("getInfo", this.info);
    },
  },
};
</script>

<style scoped>
</style>

---

3. Value transfer between components

VueData transmission can be completed through an intermediate component (specially used for data transmission: event center), as shown in the figure:

---

• Event center:vm.js

//Introduce Vue
import Vue from "vue"
//Create a Vue instance object that is specifically used to generate instances
const vm = new Vue({})
//External exposure examples
export default vm

• assemblyA.vuefile

<template>
  <div>
    Transfer data from component A to component B: {MSG}}
    <br />
    Component A receives data transmitted by component B: {info}}
    <p>< button @ Click = "sendtob" > Click to send data to component B < / button ></p>
  </div>
</template>

<script>
//Introducing event center VM
import vm from "../utils/vm.js";

export default {
  data() {
    return {
      msg: "A data",
      info: ""
    };
  },
  methods: {
    //Trigger a custom event to send data to component B
    sendToB() {
      vm.$emit("A-event", this.msg);
    },
    getData() {
      //Listen for b-event events
      vm.$on("B-event", (dat) => {
        this.info = dat;
      });
    },
  },
  created() {
    //Once a component instance is created, monitor whether other components send messages to themselves
    this.getData();
  },
};
</script>

<style scoped>
</style>

• assemblyB.vuefile

<template>
  <div>
    Component B passes data to component A: {info}}
    <br />
    Component B receives data transmitted by component A: {MSG}}
    <p>< button @ Click = "sendtoa" > Click to send data to component a < / button ></p>
  </div>
</template>

<script>
import vm from "../utils/vm.js";

export default {
  data() {
    return {
      info: "B data",
      msg: ""
    };
  },
  methods: {
    sendToA() {
      vm.$emit("B-event", this.info);
    },
    getData() {
      vm.$on("A-event", (dat) => {
        this.msg = dat;
      });
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style scoped>
</style>