搞定Vue.js父子组件传值，快来看看这三招绝活儿！

Vue.js 中父子组件传值的艺术

在 Vue.js 中，组件之间的通信至关重要，父子组件之间的数据传递尤为关键。本文将深入探讨父子组件传值的 三种方法 ，帮助你掌握 Vue.js 中的组件通信技巧。

方法 1：props - 父传子

想象一下一个发送信息的父母和一个接收信息的子女。在 Vue.js 中，props 扮演着父母的角色，允许父组件向子组件传递数据。

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

<script>
export default {
  data() {
    return {
      message: '你好，Vue.js！'
    }
  }
}
</script>

在父组件中，props 属性用于声明子组件需要接收的数据，本例中是 message 属性。

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

<script>
export default {
  props: ['message']
}
</script>

在子组件中，props 属性用于接收父组件传递的数据，使子组件能够访问和显示 message。

方法 2：$emit - 子传父

现在，让我们将视角转向子女，他们可能想向父母发送信息。在 Vue.js 中，$emit 扮演着子女的角色，允许子组件向父组件发送事件。

<!-- 子组件 -->
<template>
  <button @click="handleClick">点击我</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('click')
    }
  }
}
</script>

在子组件中，$emit 属性用于发送一个自定义事件 click。

<!-- 父组件 -->
<template>
  <child-component @click="handleClick"></child-component>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('子组件发送了点击事件')
    }
  }
}
</script>

在父组件中，@click 事件侦听器用于监听子组件发出的 click 事件。当子组件发送事件时，父组件中的 handleClick 方法将被调用。

方法 3：$refs - 父获取子

有时候，父母需要直接接触子女。在 Vue.js 中，$refs 扮演着父母的角色，允许父组件访问子组件的实例。

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

<script>
export default {
  mounted() {
    console.log(this.$refs.child) // 获取子组件实例
  }
}
</script>

在父组件中，$refs 属性用于获取子组件的引用，child 属性存储着子组件的实例。

<!-- 子组件 -->
<template>
  <div ref="child"></div>
</template>

<script>
export default {
}
</script>

在子组件中，ref 属性用于将子组件实例暴露给父组件。

总结

props、emit 和 refs 是 Vue.js 中父子组件传值的三个主要方法。每种方法都有其独特的功能和应用场景，理解这些方法对于构建有效且可维护的组件至关重要。

常见问题解答

1. 什么是 prop 验证？
答：prop 验证允许你对父组件传递给子组件的数据进行类型和格式检查，以确保数据的一致性和可靠性。

2. $emit 可以发送任意类型的数据吗？
答：是的，$emit 可以发送任何类型的数据，包括基本类型、对象、数组和函数。

3. $refs 获取子组件实例后可以做什么？
答：$refs 获取子组件实例后，可以调用子组件的方法、访问子组件的数据和修改子组件的状态。

4. props、emit 和 refs 哪种方法最常用？
答：props 是父子组件传值最常用的方法，因为它提供了类型安全性和单向数据流。

5. 组件之间的通信是否存在其他方式？
答：除了这三种方法之外，Vuex 和 Event Bus 也是用于组件之间通信的替代方案，它们提供了更全局的解决方案。