Vue2 与 Vue3 中兄弟组件之间传值方法详解

目录

Vue2 与 Vue3 中兄弟组件之间传值方法详解

一、Vue2 中兄弟组件传值

1. 创建兄弟组件

2. 创建中转文件bus.js

二、Vue3 中兄弟组件传值

1. 创建兄弟组件

三、总结

在 Vue 开发中，兄弟组件之间的传值是一个常见的需求。本文将详细介绍在 Vue2 和 Vue3 中实现兄弟组件之间传值的方法，并附上相关代码示例。

一、Vue2 中兄弟组件传值

在 Vue2 中，兄弟组件之间没有直接的传值方式，通常需要通过一个中转来实现，这个中转在视频中被称为bus。

1. 创建兄弟组件

首先创建几个兄弟组件，比如home组件、HANDER组件和Footer组件。

<!-- Home.vue -->
<template>
  <div>
    <HANDER></HANDER>
    <Footer></Footer>
  </div>
</template>

<script>
import HANDER from './HANDER.vue';
import Footer from './Footer.vue';

export default {
  components: {
    HANDER,
    Footer
  }
};
</script>

<!-- HANDER.vue -->
<template>
  <div>
    <button @click="goFooter">传值给 Footer</button>
  </div>
</template>

<script>
import bus from '../bus.js';

export default {
  data() {
    return {
      date: {
        MSG: '兄弟数据'
      }
    };
  },
  methods: {
    goFooter() {
      bus.$emit('toFooter', this.date);
    }
  }
};
</script>

<!-- Footer.vue -->
<template>
  <div>{{ MSG }}</div>
</template>

<script>
import bus from '../bus.js';

export default {
  data() {
    return {
      MSG: ''
    };
  },
  mounted() {
    bus.$on('toFooter', (data) => {
      this.MSG = data.MSG;
    });
  }
};
</script>

2. 创建中转文件bus.js

在src目录下新建一个公共文件目录，在其中创建bus.js文件。

import Vue from 'vue';

export default new Vue();

通过以上步骤，在 Vue2 中实现了兄弟组件之间的传值。点击HANDER组件中的按钮，会将数据传递给Footer组件并显示。

二、Vue3 中兄弟组件传值

在 Vue3 中，兄弟组件之间的传值方法有所不同。可以使用provide和inject来实现兄弟组件之间的传值。

1. 创建兄弟组件

以下是使用provide和inject实现兄弟组件传值的示例代码。

<!-- Home.vue -->
<template>
  <div>
    <HANDER></HANDER>
    <Footer></Footer>
  </div>
</template>

<script>
import HANDER from './HANDER.vue';
import Footer from './Footer.vue';

export default {
  components: {
    HANDER,
    Footer
  }
};
</script>

<!-- HANDER.vue -->
<template>
  <div>
    <button @click="goFooter">传值给 Footer</button>
  </div>
</template>

<script>
import { provide } from 'vue';

export default {
  data() {
    return {
      date: {
        MSG: '兄弟数据'
      }
    };
  },
  methods: {
    goFooter() {
      provide('sharedData', this.date);
    }
  }
};
</script>

<!-- Footer.vue -->
<template>
  <div>{{ MSG }}</div>
</template>

<script>
import { inject } from 'vue';

export default {
  data() {
    return {
      MSG: ''
    };
  },
  setup() {
    const sharedData = inject('sharedData');
    if (sharedData) {
      return {
        MSG: sharedData.MSG
      };
    }
    return {
      MSG: ''
    };
  }
};
</script>

通过在HANDER组件中使用provide提供数据，在Footer组件中使用inject注入数据，实现了兄弟组件之间的传值。

三、总结

无论是在 Vue2 还是 Vue3 中，兄弟组件之间的传值都需要通过一定的方式来实现。在 Vue2 中，可以使用bus作为中转来传递数据；而在 Vue3 中，可以使用provide和inject来实现兄弟组件之间的传值。这些方法各有优缺点，开发者可以根据实际情况选择适合的方法。