从 Vue 入门到精通：透视 Vue 通信方式的全面集合

2023-11-27 21:26:22

引言：

Vue.js 是一个渐进式的 JavaScript 框架，用于构建用户界面。它允许开发人员构建响应式且可重用的组件。组件通信是 Vue.js 中一个基本概念，因为它允许组件之间交换数据和事件。

props 是 Vue.js 中最常用的组件通信方式。它允许父组件向其子组件传递数据。父组件可以通过在子组件的标签中指定 props 属性来传递数据。子组件可以通过在 methods 或 computed 属性中访问这些 props。

例如：

// 父组件
<MyComponent :message="myMessage" />

// 子组件
export default {
  props: ['message'],
  methods: {
    showMessage() {
      console.log(this.message);
    }
  }
};

provide/inject 是 Vue.js 中另一种强大的组件通信方式。它允许祖先组件向其所有子孙组件提供数据。祖先组件可以通过在 data() 或 methods() 中使用 provide() 方法来提供数据。子孙组件可以通过在 setup() 方法中使用 inject() 方法来注入数据。

例如：

// 祖先组件
export default {
  data() {
    return {
      sharedData: 'This is shared data'
    };
  },
  provide() {
    return {
      sharedData: this.sharedData
    };
  }
};

// 子孙组件
export default {
  setup() {
    const sharedData = inject('sharedData');
    return {
      sharedData
    };
  }
};

attrs 和 listeners 是 Vue.js 中两个非常有用的属性。attrs 包含了父组件传递给子组件的所有属性，但不包括 props。listeners 包含了父组件传递给子组件的所有事件监听器。子组件可以通过在 template 中使用 v-bind="attrs" 和 v-on="listeners" 来访问这些属性和事件监听器。

例如：

// 子组件
<template>
  <div v-bind="$attrs">
    <p>{{ message }}</p>
  </div>
</template>

事件是 Vue.js 中一种常用的组件通信方式。它允许组件通过发出和监听事件来交换信息。组件可以通过在 template 中使用 v-on 指令来发出事件。组件可以通过在 methods 或 computed 属性中使用 $emit() 方法来监听事件。

例如：

// 子组件
export default {
  methods: {
    emitMessage() {
      this.$emit('message', 'Hello from child!');
    }
  }
};

// 父组件
export default {
  methods: {
    handleMessage(message) {
      console.log(message);
    }
  },
  mounted() {
    this.$on('message', this.handleMessage);
  }
};

插槽是 Vue.js 中一种强大的组件通信方式。它允许组件向其子组件分发内容。父组件可以通过在子组件的标签中使用插槽标签来分发内容。子组件可以通过在 template 中使用插槽标签来接收内容。

例如：

// 父组件
<MyComponent>
  <template v-slot:header>
    <h1>This is the header</h1>
  </template>
  <template v-slot:body>
    <p>This is the body</p>
  </template>
</MyComponent>

// 子组件
<template>
  <div>
    <slot name="header"></slot>
    <slot name="body"></slot>
  </div>
</template>