Vue3 组件通信方式

森呼吸。

已于 2023-10-31 18:09:15 修改

阅读量199

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2023-05-04 17:50:05 首次发布

本文链接：https://blog.csdn.net/weixin_53156345/article/details/130492041

版权

文章详细介绍了Vue3中实现组件间通信的各种方式，包括：通过expose和ref从父组件访问子组件的属性和方法；使用attrs传递非props属性；v-model的多值绑定；以及provide/inject的依赖注入。此外，还讨论了Vuex的状态管理以及在Vue3中使用mitt作为EventBus的替代方案进行跨组件通信。

摘要由CSDN通过智能技术生成

1. expose / ref

父组件获取子组件的属性或者调用子组件方法

// Child.vue
<script setup>
    // 方法一 不适用于Vue3.2版本，该版本 useContext()已废弃
    import {
    useContext } from "vue"
    const ctx = useContext()
    // 对外暴露属性方法等都可以
    ctx.expose({
   
        childName: "这是子组件的属性",
        someMethod(){
   
            console.log("这是子组件的方法")
        }
    })
    
    // 方法二 适用于Vue3.2版本, 不需要引入
    // import { defineExpose } from "vue"
    defineExpose({
   
        childName: "这是子组件的属性",
        someMethod(){
   
            console.log("这是子组件的方法")
        }
    })
</script>
 
// Parent.vue  注意 ref="comp"
<template>
    <child ref="comp"></child>
    <button @click="handlerClick">按钮</button>
</template>
<script setup>
    import child from "./child.vue"
    import {
    ref } from "vue"
    const comp = ref(null)
    const handlerClick = () => {
   
        console.log(comp.value.childName) // 获取子组件对外暴露的属性
        comp.value.