Vue3兄弟组件传值

Vue3.0中兄弟组件传值有很多种方法，今天我们介绍两种，一种是A——父——B，还有一种是使用插件mitt

mitt插件

使用npm 或者cnpm 下载插件 mitt
npm install mitt -S

新建文件夹 utils新建文件Bus.ts

import mitt from 'mitt';

const emitter = mitt();
export default emitter;

在父组件中引入A，B组件

<template>
  <div>
    <A @fn="getmsg" />
    <B :Amsg="Amsg" />
  </div>
</template>

<script setup>
  import A from './A.vue';
  import B from './B.vue';
</script>

<style></style>

在A组件中引入emitter.emit，传给将值传给Fn

<template>
  <div>
    <h1>我是A组件</h1>
    <button @click="Busbtn">bus按钮</button>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import emitter from '../../utils/Bus.ts';
  const Btnmsg = ref('我是A组件Btnmsg的值');
  // mmit
  const Busbtn = () => {
    emitter.emit('Fn', Btnmsg);
  };
</script>

<style></style>

在B组件中使用emitter.on接收数据

<template>
  <div>
    <h1>我是B组件</h1>
    {{ ABtnmsg }}
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import emitter from '../../utils/Bus.ts';
  // mitt
  let ABtnmsg = ref('');
  onMounted(() => {
    emitter.on('Fn', (e) => {
      ABtnmsg.value = e.value;
    });
  });
  // 移除指定事件
    emitter.off('Fn');
    // 移除全部事件
    emitter.all.clear();
</script>

<style></style>

使用A——父——B

父组件

<!--
 * @Author: wangyf 1758985226@qq.com
 * @Date: 2023-07-04 09:26:23
 * @LastEditors: wangyf 1758985226@qq.com
 * @LastEditTime: 2023-07-04 09:44:53
 * @FilePath: \fast-vue3\src\pages\brother\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <A @fn="getmsg" />
    <B :Amsg="Amsg" />
  </div>
</template>

<script setup>
  import A from './A.vue';
  import B from './B.vue';
  import { ref } from 'vue';
  const Amsg = ref('');
  const getmsg = (n) => {
    Amsg.value = n.value;
  };
</script>

<style></style>

A组件

<template>
  <div>
    <h1>我是A组件</h1>
    <button @click="btn">按钮</button><br />
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  const Emit = defineEmits('Fn');
  const msg = ref('我是A组件的值');
  const btn = () => {
    Emit('Fn', msg);
  };
</script>

<style></style>

B组件

<template>
  <div>
    <h1>我是B组件</h1>
    {{ Amsg }}
    <hr />
    {{ ABtnmsg }}
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  const props = defineProps({
    Amsg: {
      type: String,
      default: 'ooo',
    },
  });
</script>

<style></style>