Vue parent-child component communication method and implementation method

Vue parent-child component communication method and implementation

1. props and $emit

Parent component passespropsPass data to subcomponents, and subcomponents pass$emitTriggers events defined by the parent component to pass data.

Parent component:

<template>
  <div>
    <child-component :message="message" @update-message="updateMessage"></child-component>
  </div>
</template>
<script>
import ChildComponent from './';
export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello World!'
    }
  },
  methods: {
    updateMessage(newMessage) {
       = newMessage;
    }
  }
}
</script>

Subcomponents:

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>
<script>
export default {
  name: 'ChildComponent',
  props: ['message'],
  methods: {
    updateMessage() {
      this.$emit('update-message', 'New Message');
    }
  }
}
</script>

2. $parent and $children

The parent component can be passed$childrenAttributes get instances of all child components and pass$parentThe property gets its own parent component instance.

Parent component:

<template>
  <div>
    <child-component></child-component>
  </div>
</template>
<script>
import ChildComponent from './';
export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  methods: {
    updateMessage(newMessage) {
       = newMessage;
    }
  }
}
</script>

Subcomponents:

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>
<script>
export default {
  name: 'ChildComponent',
  data() {
    return {
      message: 'Hello World!'
    }
  },
  methods: {
    updateMessage() {
      this.$('New Message');
    }
  }
}
</script>

3. $refs

The parent component can be passedrefThe attribute sets a reference to the child component and then pass$refsGet an instance of the child component, thereby calling the child component's methods or accessing the child component's properties.

Parent component:

<template>
  <div>
    <child-component ref="child"></child-component>
  </div>
</template>
<script>
import ChildComponent from './';
export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  methods: {
    updateMessage() {
      this.$('New Message');
    }
  }
}
</script>

Subcomponents:

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>
<script>
export default {
  name: 'ChildComponent',
  data() {
    return {
      message: 'Hello World!'
    }
  },
  methods: {
    updateMessage(newMessage) {
       = newMessage;
    }
  }
}
</script>

This is the article about the communication methods and implementation methods of Vue parent-child component. For more information about Vue parent-child component communication, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!