多方式解读 Vue 组件间的通信

2023-11-08 10:59:56

在 Vue 组件库开发过程中，组件间的通信一直是一个重要的话题。本文将系统的罗列出几种不使用 Vuex，比较实用的组件间的通信方式，供大家参考。

在 Vue 组件库开发过程中，组件间的通信是一个至关重要的环节。本文将系统的罗列出几种不使用 Vuex，比较实用的组件间的通信方式，供大家参考。

事件

事件是 Vue 中最常用的组件间通信方式之一。子组件可以通过触发事件来通知父组件或兄弟组件，父组件或兄弟组件可以通过监听事件来做出响应。例如：

<template>
  <div>
    <child-component @click="handleChildClick"></child-component>
  </div>
</template>

<script>
  export default {
    methods: {
      handleChildClick() {
        console.log('子组件点击了');
      }
    }
  }
</script>

插槽

插槽是 Vue 中另一种常用的组件间通信方式。子组件可以通过插槽来将自己的内容插入到父组件的模板中。父组件可以通过定义插槽来指定子组件的内容应该插入的位置。例如：

<template>
  <div>
    <child-component>
      <template #default>
        我是子组件的内容
      </template>
    </child-component>
  </div>
</template>

<script>
  export default {
    components: {
      ChildComponent: {
        template: '<div><slot /></div>'
      }
    }
  }
</script>

共享数据

共享数据也是 Vue 中一种常用的组件间通信方式。父组件可以通过将数据保存在其 data 选项中，然后将该数据传递给子组件。子组件可以通过 props 选项来接收父组件传递的数据。例如：

<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: '你好，世界'
      }
    },
    components: {
      ChildComponent: {
        props: ['message'],
        template: '<div>{{ message }}</div>'
      }
    }
  }
</script>

发布-订阅

发布-订阅是一种比较灵活的组件间通信方式。父组件可以通过使用 Vue.js 的 emit 方法来发布事件，子组件可以通过使用 Vue.js 的 on 方法来订阅事件。例如：

<template>
  <div>
    <child-component @message="handleMessage"></child-component>
  </div>
</template>

<script>
  export default {
    methods: {
      handleMessage(message) {
        console.log('收到了子组件的消息：', message);
      }
    }
  }
</script>

父子组件通信

父子组件通信是指父组件与子组件之间的通信。父组件可以通过 props 选项来向子组件传递数据，子组件可以通过 emit 方法来向父组件发送事件。例如：

<template>
  <div>
    <child-component :message="message" @click="handleChildClick"></child-component>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: '你好，世界'
      }
    },
    methods: {
      handleChildClick() {
        console.log('子组件点击了');
      }
    },
    components: {
      ChildComponent: {
        props: ['message'],
        template: '<div>{{ message }}<button @click="$emit(\'click\')">点击我</button></div>'
      }
    }
  }
</script>

兄弟组件通信

兄弟组件通信是指兄弟组件之间的通信。兄弟组件可以通过 Vue.js 的 $parent 属性来访问它们的父组件，然后通过父组件来进行通信。例如：

<template>
  <div>
    <child-component-a></child-component-a>
    <child-component-b></child-component-b>
  </div>
</template>

<script>
  export default {
    components: {
      ChildComponentA: {
        template: '<div>我是子组件 A</div>'
      },
      ChildComponentB: {
        template: '<div>我是子组件 B<button @click="$parent.handleMessage(\'你好，世界\')">向父组件发送消息</button></div>'
      }
    },
    methods: {
      handleMessage(message) {
        console.log('收到了子组件的消息：', message);
      }
    }
  }
</script>

跨层级通信

跨层级通信是指不同层级组件之间的通信。跨层级通信可以通过 Vue.js 的 provide/inject 机制来实现。父组件可以通过 provide 方法来提供数据或方法，子组件可以通过 inject 方法来注入父组件提供的数据或方法。例如：

<template>
  <div>
    <parent-component>
      <child-component-a></child-component-a>
      <child-component-b></child-component-b>
    </parent-component>
  </div>
</template>

<script>
  export default {
    components: {
      ParentComponent: {
        provide() {
          return {
            message: '你好，世界'
          }
        },
        template: '<div><slot /></div>'
      },
      ChildComponentA: {
        inject: ['message'],
        template: '<div>{{ message }}</div>'
      },
      ChildComponentB: {
        inject: ['message'],
        template: '<div>{{ message }}<button @click="$emit(\'click\')">向父组件发送消息</button></div>'
      }
    }
  }
</script>