Common ways and usage of father and son ginseng in Vue3

In Vue 3, there are many ways to communicate between parent and child components. The following is a brief introduction to common methods, their usage and usage scenarios:

1. Props

Used to pass data to child components.
This is the most basic and most commonly used method. By defining props on a child component, the parent component can pass data to the child component. In a child component, access these properties through the props object.
Parent component：

<template>
  <ChildComponent :message="parentMessage" />
</template>
<script>
import ChildComponent from './';
export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentMessage: 'Hello from parent!',
    };
  },
};
</script>

Subcomponents：

<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  props: {
    message: String,
  },
};
</script>

2. v-model

Used to implement bidirectional binding between parent and child components. In Vue 3, the use of v-model directive and emit events for component communication through v-model. The parent component uses v-model to pass data to the child component, and triggers it through the child component, and uses the update:modelValue event to achieve two-way binding.
Here is a simple example:
Subcomponents：

<!--  -->
<template>
  <input :value="message" @input="$emit('update:modelValue', $event)" />
</template>
<script>
export default {
  props: {
    modelValue: String,
  },
  computed: {
    message: {
      get() {
        return ;
      },
      set(value) {
        this.$emit('update:modelValue', value);
      },
    },
  },
};
</script>

Parent component：

<!--  -->
<template>
  <ChildComponent v-model="parentMessage" />
</template>
<script>
import ChildComponent from './';
export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentMessage: 'Hello from parent!',
    };
  },
};
</script>

In the child component ChildComponent, the modelValue is bound to the input element by :value="modelValue", and then the update:modelValue event is triggered by @input="$emit('update:modelValue', $event)" to achieve two-way binding between parent and child components.

In parent component ParentComponent, use v-model to bind the modelValue of ChildComponent to the message, so that modifying the value of message in parent component will automatically synchronize to the ChildComponent and vice versa.

It should be noted that v-model is actually a syntactic sugar, which automatically handles value and input events. If you use v-model in a child component, the child component should accept a prop named modelValue and issue an event named update:modelValue . This ensures that v-model is properly bidirectional binding between parent and child components.

3. Provide/Inject:

Used to pass data to descendant components, provide data through Provide, and inject data through Inject. The ancestor component provides data through provide, and the descendant component receives data through inject.
Ancestor Components：

<template>
  <GrandparentComponent>
    <template v-slot="{ message }">
      <ChildComponent :message="message" />
    </template>
  </GrandparentComponent>
</template>
<script>
import GrandparentComponent from './';
export default {
  components: {
    GrandparentComponent,
  },
  provide() {
    return {
      message: 'Hello from grandparent!',
    };
  },
};
</script>

Parent component：

<template>
  <slot :message="message" />
</template>
<script>
export default {
  inject: ['message'],
};
</script>

Subcomponents：

<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  props: {
    message: String,
  },
};
</script>

IV. Events

Through custom events, the child component passes data to the parent component. The child component triggers a custom event through $emit, and the parent component listens to the event to receive data.
Subcomponents：

<template>
  <button @click="sendMessage">Send Message</button>
</template>
<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello from child!');
    },
  },
};
</script>

Parent component：

<template>
  <ChildComponent @message="handleMessage" />
</template>
<script>
import ChildComponent from './';
export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleMessage(message) {
      (message);
    },
  },
};
</script>

4. Ref

Use ref to share data between parent and child components.
Parent component：

<template>
  <ChildComponent :message="sharedMessage" />
</template>
<script>
import { ref } from 'vue';
import ChildComponent from './';
export default {
  components: {
    ChildComponent,
  },
  setup() {
    const sharedMessage = ref('Hello from parent!');
    return { sharedMessage };
  },
};
</script>

Subcomponents：

&lt;template&gt;
  &lt;div&gt;{{ message }}&lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
import { ref, watchEffect } from 'vue';
export default {
  props: {
    message: String,
  },
  setup(props) {
    const message = ref();
    watchEffect(() =&gt; {
      // Listen to message changes in props       = ;
    });
    return { message };
  },
};
&lt;/script&gt;

This is the end of this article about the transmission of father and son in Vue3. For more related content about the transmission of father and son in Vue3, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!