揭秘Vue组件间通信的秘笈：一文掌握六种通讯方法

2023-09-19 19:51:06

组件通信的必要性：携手共进，缔造和谐前端世界

在现代前端开发中，组件化已成为构建复杂应用的主流范式。组件化不仅提高了代码的可维护性，也促进了团队协作。然而，不同组件之间的有效通信是组件化开发的关键所在，它决定着应用的交互性和功能完备性。

初识 props 与 emit：父与子组件的默契交谈

props：父传子，诉说父辈的教诲

props 是 Vue 中传递父组件数据给子组件的常用方法。父组件通过 props 将数据传递给子组件，子组件接收并使用这些数据，实现父子组件间的数据通信。就好像父亲将他的教诲传授给儿子，指导其成长和发展。

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

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

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

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

emit：子报父，诉说对父辈的诉求

emit 是子组件向父组件发送事件的方法。当子组件触发 emit 事件时，父组件可以监听并响应该事件，实现子组件向父组件传递数据和事件。就好像儿子向父亲表达自己的想法和需求，寻求父辈的帮助和支持。

<!-- 子组件 -->
<template>
  <button @click="emitMessage">Send Message to Parent</button>
</template>

<script>
export default {
  methods: {
    emitMessage() {
      this.$emit('message', 'Hello from Child!');
    }
  }
}
</script>

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

<script>
export default {
  methods: {
    handleMessage(message) {
      console.log(`Received message from child: ${message}`);
    }
  }
}
</script>

解锁 ref 与 $refs：跨越层次，直达子组件

ref：在父组件中，赋予子组件一个名字

ref 是 Vue 中给子组件设置一个名字的方法。通过 ref，父组件可以访问子组件的实例，直接调用子组件的方法或操作子组件的属性。就好像父亲给儿子起了一个名字，方便在茫茫人海中认出他。

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

<script>
export default {
  methods: {
    callChildMethod() {
      this.$refs.child.sayHello();
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <p>Hello from Child!</p>
</template>

<script>
export default {
  methods: {
    sayHello() {
      console.log('Hello from Child!');
    }
  }
}
</script>

$refs：在子组件中，直达父组件

refs 是 Vue 中子组件访问父组件实例的方法。通过 refs，子组件可以访问父组件的实例，直接调用父组件的方法或操作父组件的属性。就好像儿子在茫茫人海中发现了父亲，可以直接与父亲交流。

<!-- 子组件 -->
<template>
  <p>Parent's Message: {{ $parent.message }}</p>
</template>

<script>
export default {
  mounted() {
    console.log(`Parent's Message: ${this.$parent.message}`);
  }
}
</script>

<!-- 父组件 -->
<template>
  <child-component />
</template>

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