The parent component passes data to the child component through props, and the child component receives and uses it through props; 2. The child component triggers a custom event to send data to the parent component through $emit, and the parent component handles it through event listening; 3. Use v-model to achieve two-way binding between parent and child components, which is essentially the syntax sugar of prop binding and event transmission. Always follow the principle of "props down, events up" to ensure predictability and maintainability of component communication.

In Vue.js, parent-child component communication is a fundamental concept that allows components to share data and respond to changes. Here's how to implement it effectively using standard Vue patterns.

1. Passing Data from Parent to Child with Props

To send data from a parent component to a child, use props . Props are custom attributes you can register on a child component to receive data.

Child Component (ChildComponent.vue):

 <template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

Parent Component (ParentComponent.vue):

 <template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

<script>
import ChildComponent from &#39;./ChildComponent.vue&#39;

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: &#39;Hello from parent!&#39;
    }
  }
}
</script>

Here, parentMessage is passed to the child via the message prop. The : before message indicates a dynamic binding.

2. Sending Data from Child to Parent with Events

To communicate from child to parent, use custom events with $emit . The child emits an event, and the parent listens for it.

Child Component (ChildComponent.vue):

 <template>
  <button @click="notifyParent">
    Send Message to Parent
  </button>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      this.$emit(&#39;custom-event&#39;, &#39;Hello from child!&#39;)
    }
  }
}
</script>

Parent Component (ParentComponent.vue):

 <template>
  <div>
    <p>{{ childMessage }}</p>
    <ChildComponent @custom-event="handleEvent" />
  </div>
</template>

<script>
import ChildComponent from &#39;./ChildComponent.vue&#39;

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      childMessage: &#39;&#39;
    }
  },
  methods: {
    handleEvent(message) {
      this.childMessage = message
    }
  }
}
</script>

When the button is clicked, the child emits custom-event , and the parent updates childMessage via the handleEvent method.

3. Using v-model for Two-Way Binding (Optional)

For two-way communication, especially with form inputs, you can use v-model on a component, which is syntactic sugar for binding a prop and emitting an input event.

Child Component:

 <template>
  <input :value="modelValue" @input="$emit(&#39;update:modelValue&#39;, $event.target.value)" />
</template>

<script>
export default {
  props: [&#39;modelValue&#39;]
}
</script>

Parent Component:

 <template>
  <ChildComponent v-model="parentData" />
</template>

<script>
export default {
  data() {
    return {
      parentData: &#39;&#39;
    }
  }
}
</script>

This syncs parentData with the child's input field automatically.

Key Notes:

• Always validate props with proper types and defaults.
• Avoid mutating props directly in the child; instead, emit events.
• Use meaningful event names (eg, update:title or submit-form ).
• In Vue 3, you can also use defineProps and defineEmits (in <script setup></script> ) for a more concise syntax.

Basically, props go down, events go up — stick to this flow, and your components will stay predictable and maintainable.

The above is the detailed content of How to implement parent-child component communication in Vue. For more information, please follow other related articles on the PHP Chinese website!