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>