最全攻略：vue组件传值之Props和$emit☺

2023-10-29 07:56:23

概览

组件传值是 Vue 中实现组件通信的关键手段之一。它允许父组件和子组件之间进行数据交换，从而实现复杂界面的构建。Vue 提供了多种组件传值的方法，其中最常见的有 Props 和 $emit。

Props

Props 是 Vue 中一种用于父组件向子组件传递数据的机制。Props 的本质是 JavaScript 对象，其中包含了子组件所需的数据。父组件可以通过在组件标签中使用 v-bind 指令来传递 Props。子组件可以通过在组件的 methods 选项中定义 props 属性来接收 Props。

$emit

emit 是 Vue 中一种用于子组件向父组件传递数据的机制。emit 的本质是自定义事件，子组件可以通过调用 $emit 方法来触发该事件，并将数据作为参数传递给父组件。父组件可以通过在组件标签中使用 v-on 指令来监听该事件，并在事件触发时执行相应的操作。

用法

Props：

<!-- 父组件 -->
<template>
  <child-component :message="message" />
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from parent!'
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    // 接收 Props
    sayHello() {
      alert(this.message)
    }
  }
}
</script>

$emit：

<!-- 子组件 -->
<template>
  <button @click="handleClick">Send message to parent</button>
</template>

<script>
export default {
  methods: {
    // 触发自定义事件
    handleClick() {
      this.$emit('message', 'Hello from child!')
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <child-component @message="handleMessage" />
</template>

<script>
export default {
  methods: {
    // 监听自定义事件
    handleMessage(message) {
      alert(message)
    }
  }
}
</script>