Parent component passes value to child component

The main method, using the ref attribute in the VUE, calls this.$refs.son1 in the parent component to get the child component, and then calls the method in the child component to get the data. The child component must define its corresponding method.

Create the parent component father.vue in the view folder as follows:

<template>
  <div id="father">
    <el-button type="primary" size="default" @click="send_to_son">Send information to child components</el-button>
    <son1 ref="son1"></son1>
  </div>
</template>

<script>
import son1 from ".. /components/son1";

export default {
  components: {
    son1,
  },
  methods: {
    send_to_son() {
      this.$refs.son1.get_msg_by_father("Hello! I'm the parent."); ,}}};</script>
Copy the code

Create the child component son.vue in the Components folder as follows:

<template>
  <div id="son1">
    <h1>I'm a child component</h1>
    <h3>{{msg_by_father}}</h3>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg_by_father: ""}; },methods: {
    get_msg_by_father(msg_father) {
      this.msg_by_father = msg_father; ,}}};</script>
Copy the code

The initial page looks like this:

The black box content belongs to the child component, and the blue button belongs to the parent component

When the button is pressed, the picture is as follows:

The parent component succeeded in transferring the value to the child component

Child components pass values to parent components

The main method, the child component, passes the value through the $emit method

Modify the father.vue file as follows:

<template>
  <div id="father">
    <h1>I'm the parent component</h1>
    <h3>Message from child component :{{msg_by_son}}</h3>
    <son1 @FatherEvent="get_msg_by_son"></son1>
  </div>
</template>

<script>
import son1 from ".. /components/son1";

export default {
  components: {
    son1,
  },
  data() {
    return {
      msg_by_son: ""}; },methods: {
    get_msg_by_son(data) {
      this.msg_by_son = data; ,}}};</script>
Copy the code

@fatherEvent =” get_MSg_by_son “indicates that the get_MSg_by_son function is executed when the child component triggers the FatherEvent event.

Modify the above son1.vue file with the following code:

<template>
  <div id="son1">
    <el-button type="primary" size="default" @click="send_to_son"
      >Send a message to the parent </el-button ></div>
</template>

<script>
export default {
  methods: {
    send_to_son() {
      this.$emit("FatherEvent"."Hello! I'm a child component."); ,}}};</script>
Copy the code

$emit(“FatherEvent”, “Hello! I am a child “) indicates that the child actively raises the event FatherEvent and passes the parameter.

The initial page looks like this:

The content of the black box belongs to the child component

When the button is pressed, the picture is as follows:

The child component succeeded in transferring value to the parent component

Sibling components pass values

Assume that the father.vue file is the parent component and has child components son1.vue and son2.vue. The demo uses child component 2 as an example to send parameters to child component 1.

The main method is to create an empty vUE instance, and then use the EMIT method and on method to pass parameters.

Create intermediate.js file as a transfer file, the code is as follows:

import vue from 'vue'

export default new vue()
Copy the code

Create child component 1 with the following code:

<template>
  <div id="son1">
    <h1>I'm child component 1</h1>
    <p>Child component 1 receives the contents of child component 2: {{MSg_by_SON2}}</p>
  </div>
</template>

<script>
import Event from "./intermediary";

export default {
  data() {
    return {
      msg_by_son2: ""}; },mounted() {
    Event.$on("SonGetMsg".(data) = > {
      this.msg_by_son2 = data; }); }};</script>
Copy the code

Create child component 2 with the following code:

<template>
  <div id="son2">
    <h1>I'm child component 2</h1>
    <el-button type="primary" size="default" @click="send_msg_to_son1"
      >Send data to child component 1 </el-button ></div>
</template>

<script>
import Event from "./intermediary";

export default {
  methods: {
    send_msg_to_son1() {
      Event.$emit("SonGetMsg"."Hello! I am child component 2"); ,}}};</script>
Copy the code

The initial page looks like this:

The black box above belongs to subcomponent 1, and the one below belongs to subcomponent 2. Click the button of subcomponent 2 to transfer the value to subcomponent 1, as shown in the picture:

Child component 2 succeeded in transferring value to child component 1.

Similarly, child component 1 can pass values to child component 2.