19、vue3组件通信

1、props

常见搭配形式

概述：props是使用频率最高的一种通信方式，常用与 ：父 ↔ 子。

• 若 父传子：属性值是非函数。
• 若 子传父：属性值是函数。

Father.vue

<template>
  <div>
    <h1>父亲</h1>
    <h1>父亲有遗产:【{{ moeny }}】元,要传给儿子</h1>
    <h3>父亲收到儿子送的手机：{{ erziPhone }}</h3>
    <h1>--------------------------</h1>
    <Son :father="moeny" :getIphone="getIphone"/>
  </div>
</template>

<script setup lang="ts" name="Father">
import Son from './Son.vue';
import { ref } from 'vue';
let moeny=ref(1000)
let erziPhone=ref()

function getIphone(value:string){
  erziPhone.value=value

}
 
</script>

<style scoped>

</style>

Son.vue

<template>
  <div>
   <h1>儿子</h1>
   <h1>儿子要送父亲一部【{{ iphone }}】手机</h1>
   <h3>继承父亲的遗产：{{ father }}</h3>
   <button @click="getIphone(iphone)">送给父亲手机</button>
  </div>
</template>

<script setup lang="ts" name="Son">
import { ref } from 'vue';
let iphone=ref('苹果')
 
 defineProps(['father','getIphone'])
</script>

<style scoped>

</style>

2、自定义事件

1. 概述：自定义事件常用于：子 => 父。

2. 注意区分好：原生事件、自定义事件。

• 原生事件：

  • 事件名是特定的（click、mosueenter等等）
  • 事件对象$event: 是包含事件相关信息的对象（pageX、pageY、target、keyCode）

• 自定义事件：

  • 事件名是任意名称
  • 事件对象$event: 是调用emit时所提供的数据，可以是任意类型！！！

Father.vue

<template>
  <div>
    <h1>父亲</h1>
    <h1>父亲有遗产:【{{ moeny }}】元,要传给儿子</h1>
    <h3>父亲收到儿子送的手机：{{ erziPhone }}</h3>
    <h1>--------------------------</h1>
    <!-- 给子组件绑定自定义事件 -->
    <Son :father="moeny" @get-iphone="Iphone"/>
  </div>
</template>

<script setup lang="ts" name="Father">
import Son from './Son.vue';
import { ref } from 'vue';
let moeny=ref(1000)
let erziPhone=ref('')

function Iphone(value:string){
  console.log('value',value)
  erziPhone.value=value

}
 
</script>

<style scoped>

</style>

Son.vue

<template>
  <div>
   <h1>儿子</h1>
   <h1>儿子要送父亲一部【{{ iphone }}】手机</h1>
   <h3>继承父亲的遗产：{{ father }}</h3>
   <button @click="emit('get-iphone',iphone)">送给父亲手机</button>
  </div>
</template>

<script setup lang="ts" name="Son">
import { ref } from 'vue';
let iphone=ref('苹果')
 
 defineProps(['father'])
//  声明事件
const emit=defineEmits(['get-iphone'])
</script>

<style scoped>

</style>

3、mitt

mitt可以实现任意组件间通信

mitter.ts

import mitt from "mitt";

const emitter=mitt()

export default emitter

Son.vue

<template>
  <div>
   <h1>儿子</h1>
   <h1>儿子要送父亲一部【{{ iphone }}】手机</h1>
   <button @click="songIphone">送给父亲手机</button>
  </div>
</template>

<script setup lang="ts" name="Son">
import { ref } from 'vue';
import emitter from '@/utils/mitter';
let iphone=ref('苹果')
 
function songIphone(){
  emitter.emit('faIphone',iphone)

}
</script>

<style scoped>

</style>

Father.vue

<template>
  <div>
    <h1>父亲</h1>
    <h3>父亲收到儿子送的手机：{{ erziPhone }}</h3>
    <h1>--------------------------</h1>
    <!-- 给子组件绑定自定义事件 -->
    <Son/>
  </div>
</template>

<script setup lang="ts" name="Father">
import emitter from '@/utils/mitter';
import { onUnmounted } from 'vue';
import Son from './Son.vue';
import { ref } from 'vue';

let erziPhone=ref('')

emitter.on('faIphone',(value:any)=>{
  erziPhone.value=value
})

onUnmounted(()=>{
  // 解绑事件
  emitter.off('faIphone')
})
 
</script>

<style scoped>

</style>

4、v-model

双向绑定，实现 父↔子 之间相互通信。这种方式用的少。

5、$attrs

• 概述：$attrs用于实现当前组件的父组件，向当前组件的子组件通信（祖→孙）。

• 具体说明：$attrs是一个对象，包含所有父组件传入的标签属性。

  注意：$attrs会自动排除props中声明的属性(可以认为声明过的 props 被子组件自己“消费”了)

 YeYe.vue

<template>
  <div>
   <h1>爷爷</h1>
   <h1>爷爷要送给孙子礼物</h1>
  <h3>礼物1：{{ gift1 }}</h3>
  <h3>礼物2：{{ gift2 }}</h3>
  <h3>爷爷收到孙子送来的【{{ sun }}】，非常的开心</h3>
  <h1>--------------------------</h1>
  <Father :gift1="gift1" :gift2="gift2" v-bind="{house:'别墅',car:'宝马'}" :getLift="getLift"/>
  
  </div>
</template>

<script setup lang="ts" name="YeYe">
import { ref } from 'vue';
import Father from './Father.vue';

let gift1=ref('100万')
let gift2=ref('美女')

let sun=ref('')
 
function getLift(value){
  sun.value=value
}

</script>

<style scoped>

</style>

Father.vue

<template>
  <div>
    <h1>父亲</h1>
    <h1>--------------------------</h1>
    <SunZi v-bind="$attrs"/>
  </div>
</template>

<script setup lang="ts" name="Father">
import SunZi from './SunZi.vue';
import { ref } from 'vue';



 
</script>

<style scoped>

</style>

SunZi.vue

<template>
  <div>
   <h1>孙子</h1>
   <h1>孙子收到爷爷送来的礼物{{ $attrs }}</h1>

   <button @click="getLift('奶茶')">孙子为了感谢爷爷，送给爷爷一杯奶茶</button>
  
  </div>
</template>

<script setup lang="ts" name="SunZi">
import { ref } from 'vue';

defineProps(['getLift'])
 

</script>

<style scoped>

</style>

原文地址：https://blog.csdn.net/weixin_37306719/article/details/144723041

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！