vue3组件通信五种方式

爱笑的张张

已于 2023-05-23 16:47:16 修改

阅读量5.1k

点赞数 3

分类专栏：前端文章标签：开发语言 vue.js vue

于 2023-05-23 16:28:14 首次发布

本文链接：https://blog.csdn.net/weixin_52428490/article/details/130827436

版权

前端专栏收录该内容

3 篇文章 1 订阅

订阅专栏

本文介绍了在Vue3中实现组件间通信的五种方法：1)使用props从父组件向子组件传递数据；2)通过全局事件总线$bus实现实现兄弟组件通信；3)利用v-model双向绑定数据；4)使用useAttrs获取未被props接收的属性；5)通过provide和inject实现跨级组件通信。此外，还提到了利用pinia库进行状态管理，类似于vuex的功能。

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

方式一：props

props是实现父组件向子组件传递信息，props的数据是只读的。

使用实例：

父组件：

<template>
  <div class="box">
    <h1>我是父组件</h1>
    <hr />
    <Child info="我是父组件参数" :money="money"></Child>
  </div>
</template>

子组件：需要使用到defineProps方法去接受父组件传递过来的数据

<script setup lang="ts">
//defineProps是Vue3提供方法,不需要引入直接使用
let props = defineProps(['info','money']); //数组|对象写法都可以
</script>

方法二：全局总线事件

全局事件总线$bus可以实现兄弟之间的通信

实例：

子组件1：接受子组件2传递的参数

<script setup lang="ts">
import $bus from "../../bus";
import { onMounted } from "vue";
//组件挂载完毕的时候绑定一个事件,受将接来兄弟组件传递的数据
onMounted(() => {
  $bus.on("money", (money) => {
    console.log(car);
  });
});
</script>

子组件2：给子组件1传递参数

<script setup lang="ts">
import $bus from '../../bus';
//点击按钮回调
const handler = ()=>{
  $bus.emit('money',{money:"1个w"});
}
</script>

方法3：v-model进行通信

相当于给子组件绑定props，同时也相当于绑定了自定义事件

实例

父组件：（可以在传递多个参数）

<template>
  <div>
    <h1>v-model:{{pageNo}}{{pageSize}}</h1>
    <hr />
    <Child1 v-model:pageNo="pageNo" v-model:pageSize="pageSize"></Child1>
  </div>
</template>

子组件：

<template>
  <div class="child2">
    <button @click="handler">pageNo{{ pageNo }}</button>
    <button @click="$emit('update:pageSize', pageSize + 4)">
      pageSize{{ pageSize }}
    </button>
  </div>
</template>

<script setup lang="ts">
let props = defineProps(["pageNo", "pageSize"]);
let $emit = defineEmits(["update:pageNo", "update:pageSize"]);
//第一个按钮的事件回调
const handler = () => {
  $emit("update:pageNo", props.pageNo + 3);
};
</script>

方法四：useAttrs

如果和props同时使用的话props接受了的属性，useAttrs接受不到了就。

父组件：

<template>
  <div>
    <h1>useAttrs</h1>
    <ButtonTitle type="primary" size="small" :icon="Edit" title="编辑按钮" ></ButtonTitle >
  </div>
</template>

子组件：

<template>
  <div :title="title">
     <el-button :="$attrs"></el-button>   
  </div>
</template>

<script setup lang="ts">
import {useAttrs} from 'vue';
let $attrs = useAttrs();
let props =defineProps(['title']);
//但是props接受了useAttrs方法就获取不到了
console.log($attrs);
</script>

方法五：provide与inject

实现隔代之间的数据传递

爷爷组件：

<template>
  <div class="box">
    <h1>爷爷组件{{money}}</h1>
    <hr />
    <Child></Child>
  </div>
</template>

<script setup lang="ts">
import Child from "./Child.vue";
import { ref, provide } from "vue";
let money= ref("1000");
//祖先组件给后代组件提供数据
provide("MONEY", money);
</script>

孙子组件：（可以对接受到的数据进行修改）

<template>
  <div class="child1">
    <h1>孙子组件</h1>
    <p>{{money}}</p>
    <button @click="updateMoney">更新数据</button>
  </div>
</template>

<script setup lang="ts">
import {inject} from 'vue';
//注入祖先组件提供数据
let money = inject('MONEY');
const updateMoney = ()=>{
   money.value  = '自行车';
}
</script>

利用pinia实现组件之间的通信（和vuex类似）