Vue implements the example code for event delivery of parent-child components

Parent-child component relationship

In Vue, a parent-child component refers to a relationship in which one component (parent component) contains another component (child component). Such a construction allows you to split the application into separate parts, making the code more modular and manageable.

The child component passes events to the parent component

In Vue, child components can pass events to parent components through the $emit method. This method allows the child component to notify the parent component of certain information or state changes, prompting the parent component to respond.

Sample code

Consider a simple example, we have a parent component Parent and a child component Child, which is used to send button click events to the parent component:

<!--  -->
<template>
  <div>
    <h1>Parent component</h1>
    <child @childClicked="handleChildClick" />
    <p v-if="message">{{ message }}</p>
  </div>
</template>

<script>
import Child from './';

export default {
  components: {
    Child
  },
  data() {
    return {
      message: ''
    };
  },
  methods: {
    handleChildClick(message) {
       = message;
      ('Message received by the parent component:', message);
    }
  }
};
</script>

<!--  -->
<template>
  <div>
    <button @click="sendEvent">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendEvent() {
      this.$emit('childClicked', 'Messages delivered by subcomponents');
    }
  }
};
</script>

In this example, when the user clicks a button in the child component, the sendEvent method will be called, [triggering the childClicked event, the parent component Parent listens for this event through @childClicked and calls the handleChildClick method. Therefore, the parent component can obtain the message passed by the child component.

Parent component passes props to child component

In addition to child components passing events to parent components, parent components can also pass data to child components through props. Props is a property of a Vue component that allows developers to define data in the parent component and pass it to the child component.

Sample code

Here is an example of a parent component passing data to a child component:

<!--  -->
<template>
  <div>
    <h1>Parent component</h1>
    <child :message="parentMessage" @childClicked="handleChildClick" />
  </div>
</template>

<script>
import Child from './';

export default {
  components: {
    Child
  },
  data() {
    return {
      parentMessage: 'Message from the parent component'
    };
  },
  methods: {
    handleChildClick(message) {
      ('Message received by the parent component:', message);
    }
  }
};
</script>

<!--  -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendEvent">Click me</button>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  },
  methods: {
    sendEvent() {
      this.$emit('childClicked', 'Messages delivered by subcomponents');
    }
  }
};
</script>

In this example, the parent component passes the parentMessage data attribute to the child component by binding :message="parentMessage". The child component uses props to receive this property and displays it in the template. When the user clicks the button, it will still send a childClicked event to the parent component via $emit as before.

Summarize

Through the above example, we can see that in Vue, event delivery between parent and child components mainly depends on two mechanisms: $emit and props. The child component uses $emit to trigger events and passes information to the parent component, while the parent component provides the necessary data to the child component through props.

This component communication mechanism allows Vue to be highly flexible and maintainable, allowing us to keep the code neat and readable while building complex user interfaces. Deeply understanding and effectively utilizing this mechanism will greatly improve your Vue development capabilities.

I hope this article provides you with some guidance in Vue's parent-child component event delivery. Next, please continue to explore more advanced component communication methods, such as using Vuex or Vue 3's Provide/Inject API to implement more complex logic. Through continuous learning and practice, you will be more at ease in the journey of front-end development.

The above is the detailed content of the example code for Vue implementing event delivery of parent-child components. For more information about event delivery of Vue parent-child components, please pay attention to my other related articles!