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

概览

组件传值是 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>

优缺点

Props 的优点：

• 简单易用，语法简洁
• 数据流向单一，易于追踪
• 性能相对较好

Props 的缺点：

• 只支持父组件向子组件传递数据，不支持子组件向父组件传递数据
• 无法传递复杂的数据结构，如函数、对象等
• 不支持动态更新 Props

$emit 的优点：

• 支持双向数据传递，既支持父组件向子组件传递数据，也支持子组件向父组件传递数据
• 可以传递复杂的数据结构，如函数、对象等
• 支持动态更新 Props

$emit 的缺点：

• 语法相对复杂，不易理解
• 数据流向不那么清晰，难以追踪
• 性能相对较差

总结

Props 和 emit 是 Vue 中两种最常见的组件传值方法，各有其优缺点。在实际项目中，可以根据具体需求选择合适的方法。一般来说，如果需要简单地将数据从父组件传递给子组件，可以使用 Props。如果需要双向数据传递或需要传递复杂的数据结构，可以使用 emit。