vue3 组件通讯

目录

 

为什么进行组件通讯 

1 父传子

2 子传父

3 兄弟传参

为什么进行组件通讯 

      vue组件之间遵循  封闭且开放 的原则 这里的 封闭是指组件之间有各自的逻辑

       开放是指组件之间可以通过各种方式进行通讯 以下是一些常用的组件通讯方式

1 父传子

  解释 顾名思义，是父组件向子组件进行通讯，是在父元素中去定义自定义属性 在导入的子组件的标签   中

 步骤

1 导入子组件

import Son from './Son.vue'

2传入父组件自定义属性

<Son name="张三"/>

这个name就是父组件的自定义属性,张三就是这个属性的值 也可以传入变量当然要都是非函数

<template>
    <div class="father">
        <h1>Emit</h1>
        <h2>父组件</h2>
        <Son :name="name"/>
    </div>
</template>
<script lang="ts" setup name="father">
import { ref } from 'vue';
import Son from './Son.vue'
let name=ref('张三')
</script>

  3 子组件接受父组件

<template>
    <div class="son">
        <h3>子组件</h3>
       {{ name }}
    </div>
</template>
<script lang="ts" setup name="son">
import { defineProps } from 'vue';
defineProps(['name'])
</script>

利用 defineProps 进行父组件数据的接受 注意这个数据是只读的 

2 子传父

子传父有两种方式 

  1 利用 父组件的自定义属性传一个函数 给子组件

<template>
    <div class="father">
        <h1>Emit</h1>
        <h2>父组件</h2>
        <Son  :gettop="gettop"/>
        {{ toy }}
    </div>
</template>
 
<script lang="ts" setup name="father">
import { ref } from 'vue';
import Son from './Son.vue'
let toy=ref('')
let gettop=(value:string)=>{
    console.log(1);
    
    toy.value=value
}
 
</script>

子组件接受这个函数 并传递一个值 从而实现子组件向父组件的传值

<template>
    <div class="son">
        <h3>子组件</h3>
       <button @click="gettop('奥特曼')">send</button>
    </div>
</template>
 
<script lang="ts" setup name="son">
import { defineProps } from 'vue';
defineProps(['gettop'])
</script>

  另一种方式就是子组件通过自定义事件 将函数传递给父组件

在vue2 里我们是通过 this.$emit进行自定义事件的 但是 vue3的组合式Api没有this 如何使用呢

<template>
    <div class="son">
        <h3>子组件</h3>
       <button @click="gettop('奥特曼')">send</button>
    </div>
</template>
 
<script lang="ts" setup name="son">
import { defineEmits} from 'vue';
let $emit= defineEmits(['send'])
const gettop=(data:string)=>{
  
    $emit('send',data)
}
</script>

是通过 defineEmit 来进行自定义事件  在父组件中再进行触发

<template>
    <div class="father">
        <h1>Emit</h1>
        <h2>父组件</h2>
        <Son  @send="fn"/>
        {{ toy }}
    </div>
</template>
 
<script lang="ts" setup name="father">
import { ref } from 'vue';
import Son from './Son.vue'
let toy=ref('')
let fn=(value:string)=>{
    
    toy.value=value
}
 
</script>

子组件中定义的什么事件 就在父组件中触发什么事件

3 兄弟传参

 含义 有共同父组件的两个子组件之间利用全局事件总线进行通讯

实现方法 先下载 全局事件总线

npm install mitt -S   

建立一个ts文件, 或者建立一个文件夹 ,我这里直接建立了一个文件

在mitt.ts中加入以下代码

import mitt from "mitt";
 
// 创建mitt实例
  const emitter = mitt();
  export default emitter;

在Son.vue中

<template>
    <div class="son">
        <h3>孩子1</h3>
       <button @click="send">send</button>
    </div>
</template>
 
<script lang="ts" setup>
import  emitter from './mitt';
 
let send=()=>{ emitter.emit('send','我是孩子1我发送了数据')}
</script>

在son2 中

<template>
    <div class="son2">
        <h3>孩子2</h3>
       
    </div>
</template>
 
<script lang="ts" name="son2" setup>
import emitter from './mitt'
import {onMounted} from 'vue'
onMounted(()=>{
    emitter.on('send',(data)=>{
        console.log('孩子2收到数据',data)
    })
})
  
</script>

其他的传值，可以用 pinia或vuex这两个可以实现全局的组件通讯，一般只要不是父子组件的关系

vue3 都建议采用  pinia的方式进行组件通讯