The use and difference between props and $emit in Vue

The use and difference between props and $emit in Vue

In Vue, communication between components is a very important concept. Vue provides two methods, props and $emit, to implement communication between components. This article will introduce the use and difference between props and $emit in detail, and illustrate it with code examples.

1. Props
Props are a way for parent components to pass data to child components. The parent component can pass any type of data to the child component through props, and the child component can receive and use this data.

1.1 Define props in the parent component

When using a subcomponent in a parent component, you can pass data to the subcomponent by adding attributes to the label of the subcomponent. For example:

<template>
  <div>
    <!-- 使用子组件，并通过props传递数据 -->
    <ChildComponent :message="message"></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

In this example, we pass data to the child component by adding a property named message on the ChildComponent tag and setting the value to the message variable in the parent component.

1.2 Receive props in child components

In child components, you can receive data passed by the parent component through the props option. For example:

<template>
  <div>
    <!-- 子组件中使用props -->
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

In this example, we use the props option to define a property named message and specify its type as String. Child components can directly use the message attribute to obtain the data passed by the parent component.

2. $emit
$emit is a way for child components to pass data to parent components. Child components can trigger a custom event through $emit and pass data to the parent component.

2.1 Triggering events in child components

In child components, you can use this.$emit to trigger a custom event and pass data to the parent component. For example:

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      // 通过$emit触发一个自定义事件，并向父组件传递数据
      this.$emit('message', 'Hello Vue!')
    }
  }
}
</script>

In this example, we add a @click event listener to the button, use this.$emit in the event handler function to trigger a custom event named message, and pass a Data named 'Hello Vue!'.

2.2 Receive events in the parent component

In the parent component, you can listen to the events triggered by the child component by adding v-on on the child component label, and use the corresponding event handler function Receive the passed data. For example:

<template>
  <div>
    <!-- 监听子组件的自定义事件 -->
    <ChildComponent @message="onMessage"></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    onMessage(data) {
      // 在事件处理函数中接收子组件传递过来的数据
      console.log('收到消息:', data)
    }
  }
}
</script>

In this example, we use v-on on the ChildComponent tag to listen to the child component's custom event message, and receive the data passed by the child component in the onMessage event handler.

3. The difference between props and $emit

Props and $emit are both used to implement communication between components, but there are certain differences in their usage and direction of action.

Props are a way for parent components to pass data to subcomponents. Data is passed to subcomponents in the form of attributes, and subcomponents can use the props option to declare the attributes they need to receive, and then use them just like normal attributes. Use this data.

$emit is the way for child components to pass data to parent components. Child components can use this.$emit to trigger a custom event and pass the data to the parent component, and then pass v-on in the parent component. Listen to events triggered by child components and receive data in the corresponding event handler.

The data flow of props is a one-way flow from the parent component to the child component, and the parent component passes data to the child component. The data flow of $emit is a one-way flow from the child component to the parent component. The child component passes data to the parent component by triggering events.

Summary:
props are used by parent components to pass data to subcomponents. Data is passed to subcomponents in the form of attributes, and subcomponents receive data through props options.
$emit is used by the child component to pass data to the parent component. The child component triggers a custom event through this.$emit and passes the data to the parent component. The parent component listens to the event triggered by the child component through v-on, and Receive data in the event handler function.

The above is a detailed introduction to the use and differences of props and $emit in Vue. I hope it will help you understand the communication between components.

The above is the detailed content of The use and difference between props and $emit in Vue. For more information, please follow other related articles on the PHP Chinese website!