Method functions in Vue3: Master the method of communication between Vue3 components

Vue3 is one of the most popular front-end frameworks currently. It is highly praised for its powerful features and simple and easy-to-use API. Vue3 provides many ways to organize and interact with various components, including inter-component communication, state management, dynamic components, etc. In Vue3, we can use some method functions to implement communication between components. Let us master these methods.

1. props

props is an important feature of Vue3. It is a way to define the properties of components and transfer data. If you need to pass data from a component to its child components, you can use props. You can specify an array in the props option in the child component, which contains the properties you want to accept. When you pass properties from a parent component, these properties are automatically passed to and available in the child component. The following is a simple example:

<template>
  <div>
    <Child :message="message" />
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  components: { Child },
  data() {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

In the Child component, we can receive data through props:

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

Note that the type of each attribute needs to be specified in the props option, so that This ensures that the data type passed into the child component is correct.

2. emit

emit is another commonly used inter-component communication method in Vue3. When you need to trigger an event in a child component, you can use the emit method. In the parent component, you can listen to this event and perform some operations. The following is a simple example:

<template>
  <div>
    <Child @alert="showAlert" />
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  components: { Child },
  methods: {
    showAlert(msg) {
      alert(msg)
    }
  }
}
</script>

In the Child component, we can use $emit to trigger an event:

<template>
  <div>
    <button @click="onClick">Click Me</button>
  </div>
</template>
<script>
export default {
  methods: {
    onClick() {
      this.$emit('alert', 'Hello World!')
    }
  }
}
</script>

When the user clicks the button, the child component will trigger an alert event, and pass a message to the parent component.

3. provide/inject

provide/inject is another inter-component communication method provided by Vue3. It is slightly different from props and emit in that it allows you to provide some data to the child component. Child components can receive this data through the inject option. The following is a simple example:

<template>
  <div>
    <Child />
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  provide: {
    message: 'Hello World!'
  },
  components: { Child }
}
</script>

In the Child component, we can use the inject option to receive this data:

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  inject: ['message']
}
</script>

Note that the name of the data that needs to be received is specified in the inject option. This way you can use it directly in child components.

4. $parent / $children

$parent and $children are two other tools for communication between components provided by Vue3. $parent is used from a child component to access properties or methods in its parent component, while $children is used from a parent component to access properties or methods in its child components. Since these two options are provided in Vue3, they may be abandoned in future versions of Vue3.

5. $attrs / $listeners

$attrs and $listeners are two magical options provided by Vue3. The $attrs option provides the component with all the attributes passed to it, and they can be used with the child component's props option as follows:

<template>
  <div>
    <Child v-bind="$attrs" />
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  components: { Child },
  data() {
    return {
      message: 'Hello World!'
    }
  },
  mounted() {
    console.log(this.$attrs) // { message: "Hello World!" }
  }
}
</script>

In the Child component:

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

In In the above example, the subcomponent can use the $attrs option to receive and define the corresponding props options. The

$listeners option provides the component with all event listeners in the parent component. This will allow you to use these event listeners in child components. As shown below:

<template>
  <div>
    <button v-on="$listeners">Click Me</button>
  </div>
</template>
<script>
export default {
  mounted() {
    console.log(this.$listeners) // { 'click': [f1] }
  }
}
</script>

When the user clicks the button, the event listener in the parent component will be fired.

Summary

This article lists the commonly used inter-component communication methods in Vue3. These methods include: props, emit, provide/inject, $parent/$children, and $attrs/$listeners. These methods can help you better organize and interact with various components, improve your development efficiency and improve user experience. In practice, you may need to use multiple methods simultaneously to achieve your business goals, so make sure you are aware of the options and know when and where they apply.

The above is the detailed content of Method functions in Vue3: Master the method of communication between Vue3 components. For more information, please follow other related articles on the PHP Chinese website!