vue3中的组件间通信

已于 2024-04-10 17:10:25 修改
阅读量3k 收藏 4
点赞数
分类专栏： # Vue3 文章标签： vue.js
于 2022-03-14 16:00:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53912016/article/details/123480927
版权

与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;

5 自定义事件

父

<template>
  <div>1111111111</div>
  <!-- 自定义事件 -->
  <aTwo @xxx="handle"></aTwo>
</template>
<script lang='ts'>
import a1 from '../components/a1.vue'
import aTwo from '../components/a2.vue'
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'//引入路由
export default {
  name: '',
  components: {
    aTwo
  },
  setup() {
    let router = useRouter(), route = useRoute();
    const data = reactive({
      handle(par1, par2) {
        console.log(par1, par2);

      }

    })
    onBeforeMount(() => {
    })
    onMounted(() => {
    })
    const refData = toRefs(data);
    return {
      ...refData,
    }

  }
};
</script>
<style scoped></style>

子

<template>
    <div>a2</div>
    <div @click="handle">点击我触发xxx数据</div>
</template>

<script lang='ts'>
import { defineProps, defineEmits, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'//引入路由
export default {
    name: '',
    $emit: defineEmits(['xxx']),
    setup() {
        let router = useRouter(), route = useRoute();
        const data = reactive({
            // 使用defineEmits方法返回函数自定义事件
            handle() {
                this.$emit('xxx', '45454545')
            }
        })
        onBeforeMount(() => {
        })
        onMounted(() => {
        })
        const refData = toRefs(data);
        return {
            ...refData,
        }

    }
};
</script>
<style scoped></style>

6 useAttrs方法

vue3提供useAttrs方法 可以获取组件的属性与事件

父

<template>
  <div>1111111111</div>
  <aTwo type="primary" icon="Edit" title="编辑"> </aTwo>
  <!-- <el-button type="primary" icon="Edit" circle /> -->
</template>
<script lang='ts'>
import a1 from '../components/a1.vue'
import aTwo from '../components/a2.vue'
import { Edit } from '@element-plus/icons-vue';
import { useAttrs, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'//引入路由
export default {
  name: '',
  components: {
    aTwo,
    Edit
  },
  setup() {
    let router = useRouter(), route = useRoute();
    const data = reactive({

      // vue3提供useAttrs方法 可以获取组件的属性与事件
    })
    onBeforeMount(() => {
    })
    onMounted(() => {
    })
    const refData = toRefs(data);
    return {
      ...refData,
    }

  }
};
</script>
<style scoped></style>

子

<template>
    <div :title="attr.title">
        <el-button :="attr" />
    </div>
    <!-- v-bind="{a:1,b:2}" 相当于:="{a:1,b:2}" -->
</template>
<script lang='ts'>
import { useAttrs, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'//引入路由
export default {
    name: '',

    setup() {
        let router = useRouter(), route = useRoute();
        const data = reactive({
            attr: useAttrs(),
            // props与useAttrs都可以获取父组件传递过来的属性与属性值
            // 但是prps接收了 useAttrs就接收不到 优先级高
        })
        console.log(data.attr);
        onBeforeMount(() => {
        })
        onMounted(() => {
        })
        const refData = toRefs(data);

        return {
            ...refData,
        }

    }
};
</script>
<style scoped></style>

7 ref

ref 父直接拿到子组件数据

父

<template>
  <div>曹操{{ money }}</div>
  <button @click="btnclick">点击曹操+10 曹植-10</button>
  <aTwo ref="son"></aTwo>
</template>
<script lang='ts'>
import a1 from '../components/a1.vue'
import aTwo from '../components/a2.vue'
import { ref, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'//引入路由
export default {
  name: '',
  components: {
    aTwo,
  },
  setup() {
    let router = useRouter(), route = useRoute();
    const data = reactive({
      son: ref(),
      money: 1000,
      btnclick() {
        data.money += 10;
        data.son.money -= 10;
      }
    })
    onBeforeMount(() => {
    })
    onMounted(() => {
    })
    const refData = toRefs(data);
    return {
      ...refData,
    }

  }
};
</script>
<style scoped></style>

子

<template>
    <div>曹植{{ money }}</div>
</template>
<script lang='ts'>
import { ref, defineExpose, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'//引入路由
export default {
    name: '',
    setup() {
        let router = useRouter(), route = useRoute();
        // let money = ref(10)//定义子的值
        const data = reactive({
            money: ref(10)//定义子的值
        })
        // 组件内部数据对外关闭 通过defineExpose暴露出去

        onBeforeMount(() => {
        })
        onMounted(() => {
        })
        defineExpose({
            ...toRefs(data)//暴露出去 这个是data里面所有的数据都暴露
        })
        const refData = toRefs(data);
        return {
            ...refData,
        }
    }
};
</script>
<style scoped></style>

7.1 $parent

子拿到父的数据

父

<template>
  <div>曹操{{ money }}</div>
  <!-- <button @click="btnclick">点击曹操+10 曹植-10</button> -->
  <aTwo ref="son"></aTwo>
</template>
<script lang='ts'>
import a1 from '../components/a1.vue'
import aTwo from '../components/a2.vue'
import { ref, defineExpose, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'//引入路由
export default {
  name: '',
  components: {
    aTwo,
  },
  setup() {
    let router = useRouter(), route = useRoute();
    const data = reactive({
      son: ref(),
      money: 1000,
    })
    onBeforeMount(() => {
    })
    onMounted(() => {
    })
    defineExpose({
      ...toRefs(data)//暴露出去 这个是data里面所有的数据都暴露
    })
    const refData = toRefs(data);
    return {
      ...refData,
    }

  }
};
</script>
<style scoped></style>

子

<template>
    <div>曹植{{ money }}</div>
    <button @click="btnclick($parent)">点击父组件</button>
</template>
<script lang='ts'>
import { ref, defineExpose, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'//引入路由
export default {
    name: '',
    setup() {
        let router = useRouter(), route = useRoute();
        // let money = ref(10)//定义子的值
        const data = reactive({
            money: ref(10),//定义子的值
            btnclick($parent) {
                data.money += 10
                $parent.money-=1
            }
        })
        // 组件内部数据对外关闭 通过defineExpose暴露出去

        onBeforeMount(() => {
        })
        onMounted(() => {
        })
        // defineExpose({
        //     ...toRefs(data)//暴露出去 这个是data里面所有的数据都暴露
        // })
        const refData = toRefs(data);
        return {
            ...refData,
        }
    }
};
</script>
<style scoped></style>

8 provide/inject

父

<template>
  <div>123456</div>
  <aTwo></aTwo>
</template>
<script lang='ts'>
import a1 from '../components/a1.vue'
import aTwo from '../components/a2.vue'
import { ref, provide, defineExpose, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'//引入路由
export default {
  name: '',
  components: {
    aTwo,
  },
  setup() {
    let router = useRouter(), route = useRoute();
    const data = reactive({
      // provide提供与inject注入可以实现隔辈传值
      car: '法拉利'
      // provide 2个参数 第一个数据的key 第二个祖先组件提供的数据
      
    })
    onBeforeMount(() => {
      provide("token", data.car)
    })
    onMounted(() => {
    })
    const refData = toRefs(data);
    return {
      ...refData,
    }

  }
};
</script>
<style scoped></style>

子

a2.vue

<template>
    <div>我是子组件</div>
    <a1></a1>
</template>
<script lang='ts'>
import a1 from '../components/a1.vue'
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'//引入路由
export default {
    name: '',
    components: {
        a1,
    },
    setup() {
        let router = useRouter(), route = useRoute();
        const data = reactive({

        })
        onBeforeMount(() => {
        })
        onMounted(() => {
        })
        const refData = toRefs(data);
        return {
            ...refData,
        }

    }
};
</script>
<style scoped></style>

祖孙

a1.vue

<template>
    <div>我是孙子组件{{ car }}</div>
</template>
<script lang='ts'>
import { inject, provide, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'//引入路由
export default {
    name: '',
    setup() {
        let router = useRouter(), route = useRoute();
        // 注入祖先组件提供的数据

        const data = reactive({
            car: inject("token")
        })
        onBeforeMount(() => {
            console.log(inject("token"), '12');

        })
        onMounted(() => {
        })
        const refData = toRefs(data);
        return {
            ...refData,
        }

    }
};
</script>
<style scoped></style>

9 slot(插槽)

在这里插入代码片
小阳生煎
关注
专栏目录
vue3中组件间通信之插槽（slot）
limif的博客
10-08 2788
（slot）：组件中的模板会覆盖组件中的原始内容（即自定义标签对内部的内容会不显示），使用插槽可以使自定义标签内容显示；1.匿名插槽（单个插槽）：（无name属性）2.具名插槽：（有name属性）：父组件提供内容，子组件中展示。3.作用域插槽（带数据插槽）
vue3 常用的组件互相通信(父子、兄弟、爷孙、任意组件)
热门推荐
u014678583的博客
04-04 2万+
方案父传子子传父propsemitsv-modelemitsrefemitsprovideinjectEventBusemit / on(可用于兄弟、爷孙、全局)emit / on(可用于兄弟、爷孙、全局)Vuex作用于全局作用于全局pinia作用于全局作用于全局1、父传子主要用到props属性传递，父组件通过自定义属性给子组件传值，子组件用props接收子组件 TitleMore.vue// 子组件
Vue3组件通信13种方法
最新发布
weixin_49295874的博客
09-20 1526
总结这 13 种方法涵盖了 Vue 3 中几乎所有的组件通信场景。根据你的具体需求和应用规模,选择最合适的通信方式。好的组件设计能够简化通信,提高代码的可维护性。
vue3组件之间通讯
m0_58889179的博客
08-09 1948
当父组件向子组件传递数据，在子组件中并未声明使用则数据会暂存到组件$attrs中，此时子组件可以通过v-bind="$attrs",将这些暂存数据传递给孙组件中。插槽分为：默认插槽，具名插槽，作用域插槽(父组件插槽内容使用子组件数据)父组件通过provide传递数据，后代组件通过inject接收数据。组件通过defineExpose对外暴露要传递的数据，1. props，实现父组件向子组件通讯。2. emit，实现子组件向父组件通讯。3.mitt，实现任意组件之间通讯。
【Vue3基础】Vue3 组件间通信
cannotbecounted的博客
07-10 2334
对Vue3中的组件间通信进行简要的介绍。
vue3 组件之间的通信
Tianxiaoxixi的博客
06-27 8003
vue3 组件之间的通信
【干货】Vue3 组件通信方式详解
dsgdauigfs的博客
06-27 1145
毫无疑问，组件通信是Vue中非常重要的技术之一，它的出现能够使我们非常方便的在不同组件之间进行数据的传递，以达到数据交互的效果。所以，学习组件通信技术是非常有必要的，本文将总结Vue中关于组件通信的八种方式，帮助大家在使用Vue的过程中更加得心应手！如果文中有不对、疑惑的地方，欢迎在评论区留言指正！！在开始之前我们需要明白什么是组件通信，组件通信可以拆分为两个部分：组件通信都知道组件是vue最强大的功能之一，vue中每一个.vue文件我们都可以视之为一个组件，简单来说组件就是对UI结构的复用。
详解Vue2中组件间通信的解决全方案
08-29
Vue2中的组件间通信是其核心特性之一，它使得开发者能够构建复杂的单页应用程序(SPA)。组件化开发使得代码组织更加清晰，但随之而来的是组件间的通信需求。这篇文章将详细探讨Vue2中如何实现组件间的数据传递。 ...
vue之父子组件间通信实例讲解(props、$ref、$emit)
01-19
那么组件间如何通信，也就成为了vue中重点知识了。这篇文章将会通过props、$ref和 $emit 这几个知识点，来讲解如何实现父子组件间通信。 在说如何实现通信之前，我们先来建两个组件father.vue和child.vue作为示例的...
Vue中父组件向子组件通信的方法
08-30
Vue中父组件向子组件通信的方法 在 Vue 框架中，父组件向子组件通信是一种常见的场景。可以使用 props 将父组件的数据传递给子组件。子组件在接受数据时需要显示声明 props。在本文中，我们将通过一个实例来介绍 ...
vue3组件间通信
最是人间留不住，朱颜辞镜花辞树。
11-13 717
Vue3不同于Vue2，在 Vue3的setup中我们是无法访问到this的，所以我们需要借助一个方法，那就是。vue到3.0之后好像取消了bus全局事件总线，选择使用mitt作为兄弟组件间通信和传参的方式。我的理解是：在多级嵌套的组件体系中，某一级的外层组件可以通过。组件提供用户的位置。下面的例子是官网文档中的使用方法。emit是最常见的用于子组件向父组件传递消息的方法。语法糖的写法，其组件是默认关闭的，也就是说如果是通过。来访问子组件中定义的值是拿不到的，必须通过。有三个组件，分别是爷爷，爸爸，孙子。
Vue3组件间通信
lxk116688的博客
08-04 187
父组件通过 ref 获取到子组件并调用其方法或访问数据。子组件通知父组件触发一个事件，并且可以传值给父组件。子组件可以通过 expose 暴露自身的方法和数据。
总结了Vue3的七种组件通信方式，别再说不会组件通信了
一碗周
02-10 2365
大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~ 写在前面 本篇文章是全部采用的<script setup>这种组合式API写法，相对于选项式来说，组合式API这种写法更加自由，具体可以参考Vue文档对两种方式的描述。 本篇文章将介绍如下七种组件通信方式： props emit v-model refs provide/inject eventBus vuex/pinia(状态管理工具) 开始搞事情~ 举一个栗子 俗话说的好，学习不写demo，.
Vue3组件通信
umin_的博客
08-09 1367
在 Vue 中，组件之间的通信是实现复杂功能的关键。常见的方式包括： Props 和自定义事件：用于在父子组件之间传递数据，实现简单的双向通信。 Mitt：轻量级事件总线，适合跨组件的双向通信，超越了父子关系的限制。 v-model：简化双向数据绑定，使父子组件的数据同步更为便捷。 $attrs 和 $refs：提供灵活的通信方式，允许访问组件实例和传递属性。 Provide 和 Inject：用于祖先组件与后代组件间的数据共享，适合全局状态管理。 Pinia：Vue 的状态管理库，集中化管理全
Vue3组件间的通信方式
m0_64642443的博客
07-18 6887
目录 1.props父向子组件通信2.自定义事件 子向父组件通信3.全局事件总线4.v-model组件通信（父子组件数据同步）绑定单个数据同步 绑定多个数据同步 5.useAttrs组件通信 6.ref与$parentref获取子组件实例对象 $parent获取父组件实例对象 7.provide-inject 可以实现隔辈传输8.Pinia选择式API：组合式API：父组件：props用于父组件向子组件传递数据，子组件用defineProps接收父组件传递来的参数在父组件中我们可以在使用子组件时，对其传递p
Vue3的11种组件间通信方式简单说明，前端必备5分钟完看学会
04-16 2729
vue3出来很久了，也非常成熟了，平时项目只管用也没多想，直至今天想写一编关于vue3传参，然后我总结一下竟然总结出来11种方式那么多，11种我分别列了出来，由于vue3有两种setup写法，下面我将用最简洁的代码例子针对主流的写法对每一种用法进行细说。 一、父传子 父组件代码： 在第二行那里 :name="name" 把那么传给子组件 子组件代码： const props = defineProps({})接收后直接在标签使用 二、子传父 子组件代码： 注册 addEvent 事件
Vue3组件间通信的多种方式（超全）
小王的技术库
10-29 3205
通过vue和only-allow库的研究，使用一些工具和手段来约束团队，从而实现项目包管理器的规范化而这些使用这些工具，能够帮助我们更加便捷的实现规范化流程，使得项目流程上更加统一和工程化。为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
vue3组件通信详解
Lora_0925的博客
05-30 4248
vue3组件通信方式有以下几种：porps，$emit， bus，v-model，useAttrs，$ref/$parent，provide/inject，pinia，slot。
vue3 兄弟组件间通信
08-02
在Vue3中，兄弟组件通信有两种方式。第一种是通过父组件来传值的方式，即先把值传给父组件，再通过父组件传给另一个子组件，但是这种方式非常麻烦。第二种方式是通过获取子组件的实例来调用子组件的方法，具体步骤如下： 1.在子组件中，将需要暴露给父组件的方法或属性通过defineExpose()方法暴露出来。 2.在父组件中，使用ref获取子组件的实例。 3.在父组件中，定义一个变量来存储获取到的子组件实例。 4.通过定义的变量来调用子组件的方法或属性。 另外，兄弟组件间的通信还可以通过统一规范写法的方式来实现，具体步骤如下： 1.在父组件中直接在子组件标签上绑定属性和值，来传递到子组件。 2.在子组件中通过defineProps()方法来接收传递过来的属性，并给其定义类型再用withDefaults()方法是为了在不传递的时候给其一个默认值。 3.通过定义的变量来调用子组件的方法或属性。 --相关问题--:
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值