vue3中的组件间通信

与vue2的方法一样

1 父给子传值 props

我们通过在父组件引用子组件的时候，可以通过自定义属性进行值的传递，在子组件通过 props 进行接收。

父传值给的是值

父

<template>
  <div class="main">
    <rcode :tovalue="test"></rcode>
  </div>
</template>
<script lang='ts'>
import rcode from "../component/list.vue";//这是子的文件
import { ref, watch, reactive, toRefs } from "vue";
export default {
  components: { rcode },
  setup() {
    const test = ref("yangyang");
    const data = reactive({
      list: "12121",
    });
    const refData = toRefs(data);
    return {
      ...refData,
      test,
    };
  },
};
</script>
<style  scoped>
.main {
  font-size: 16px;
}
</style>

子

components/login/QRcode.vue //子文件

<template>
    <div class="qrCode">
        我是子
        {{ tovalue }}
    </div>
</template>
<script lang='ts'>
import { reactive, toRefs } from "vue";
export default {
    name: "",
    props: ["tovalue"],
    setup() {
        const data = reactive({});
        const refData = toRefs(data);
        return {
            ...refData,
        };
    },
};
</script>
<style scoped></style>

2 子组件向父组件传递 emit

子传父是通过点击事件传递值

子

<template>
    <div class="qrCode">
        我是子
    </div>
    <br>
    <button @click="send">点击你</button>
</template>
<script lang='ts'>
import { reactive, toRefs } from "vue";
export default {
    name: "",
    setup(props, context) {
        const data = reactive({
            send(){ 
             	//使用setup中第二个参数向父组件发出信息，调用父组件中子组件上定义的接收方法“receiveChild”
                context.emit("receiveChild", "这是一条来自子组件的消息"); 
            }
        });
        const refData = toRefs(data);
        return {
            ...refData,
        };
    },
};
</script>
<style scoped></style>

父

<template>
  <div class="main">
    <rcode @receiveChild="btnFa"></rcode>
  </div>
</template>
<script lang='ts'>
import rcode from "../component/list.vue";//这是子的文件
import { ref, watch, reactive, toRefs } from "vue";
export default {
  components: { rcode },
  setup() {
    const data = reactive({
      btnFa(e) { 
        //输出接收到子组件传来的值，输出：“这是一条来自子组件的消息”
        alert(e)
      }
    });
    const refData = toRefs(data);
    return {
      ...refData,
    };
  },
};
</script>
<style  scoped>
.main {
  font-size: 16px;
}
</style>

3 v-model传值

父

<template>
  <div class="main">
    我是父
    <rcode v-model:aaa="aaa"></rcode>
  </div>
</template>
<script lang='ts'>
import rcode from "../component/list.vue";//这是子的文件
import { ref, watch, reactive, toRefs } from "vue";
export default {
  components: { rcode },
  setup() {
    const data = reactive({
     aaa:20,
    });
    const refData = toRefs(data);
    return {
      ...refData,
    };
  },
};
</script>
<style  scoped>
.main {
  font-size: 16px;
}
</style>

子

<template>
    <div class="qrCode">
        我是子
    </div>
    <br>
    <div >{{ aaa }}</div>
    <button @click="send">点击你</button>
</template>
<script lang='ts'>
import { reactive, toRefs } from "vue";
export default {
    name: "",
    props: { aaa: Number },
    setup(props, context) {
        const data = reactive({
            send() {
             context.emit('update:aaa',200)//事件名 修改的数值
            }
        });
        const refData = toRefs(data);
        return {
            ...refData,
        };
    },
};
</script>
<style scoped></style>

4 兄弟组件之间通讯

安装：npm i mitt -s

点击按钮，改变兄弟组件的值

1.父组件

<template>
  <div>
    <brotherC></brotherC>
    <brotherD></brotherD>
  </div>
</template>
<script>
import brotherC from "@/components/brother/brotherC";
import brotherD from "@/components/brother/brotherD";
export default {
  name: "brotherLink",
  components: {
    brotherC,
    brotherD,
  },
}
</script>

2.子组件1

<template>
  <div>
    <h2>brotherC</h2>
    <a-button @click="changeMsg" type="primary">点击修改msg</a-button>
  </div>
</template>

<script>
import { reactive, ref } from "vue";
import emitter from "@/common/js/utils/mitt.js";
export default {
  name: "brotherC",
  setup() {
    let changeMsg = () => {
        emitter.emit('change-msg')
    };
    return {
      changeMsg,
    };
  },
};
</script>
<style lang='scss' scoped>
</style>

3.子组件2

<template>
  <div>
    <h2>brotherD</h2>
    <p>{{ msg }}</p>
  </div>
</template>

<script>
import { reactive, ref, onUnmounted } from "vue";
import emitter from "@/common/js/utils/mitt.js"
export default {
  name: "brotherD",
  setup() {
    let msg = ref("hello");
    let changeMsg = ()=>{
        msg.value = '我被改变啦';
    }
    // 监听事件，更新数据
    emitter.on('change-msg',changeMsg)
    // 卸载
    onUnmounted(()=>{
        console.log('onUnmounted')
        emitter.off('change-msg',changeMsg)

    })

    return {
      msg,
      changeMsg
    };
  },
};
</script>
<style lang='scss' scoped>
</style>

4.mitt.js

import mitt from 'mitt';
const emitter = mitt();
export default emitter;