Vue3的组件如何通讯

一、defineProps，defineEmits

子组件nameChange.vue

<template>
  <div class="title">
    姓：{{ firstName }}
  </div>
  <div>
    名：{{ lastName }}
  </div>
  {{ name }}
  <button @click="clickTap">传参</button>
</template>
 
<script setup lang="ts">
import { Ref } from 'vue';
 
type props = {
  firstName: string,
  lastName: string
}
const prop = withDefaults(defineProps<props>(), {
  firstName: 'c',
  lastName: 'qs'
})
 
const emit = defineEmits<{
    (e: "on-click", name: props): void
}>()
 
const clickTap = () => {
  emit('on-click', prop);
}
</script>
<style>
 
</style>

父组件

<template>
    <nameChange @on-click="getName" first-name="c" last-name="qs"></nameChange>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
type props = {
    firstName: string,
    lastName: string
}
let names = reactive<props>({
    firstName: '1',
    lastName: '2'
});
import nameChange from "./components/nameChange.vue";
 
const getName = (data: props) => {
    names.firstName = data.firstName;
    names.lastName = data.lastName;
}
</script>

二、provide，inject

//注入依赖
const colorName = ref<string>('#fff449')
provide('colorName', colorName)
 
//获取依赖
const color = inject<Ref<string>>('colorName');
color!.value = 'blue';
 

三、defineExpose

子组件暴露数据

<script setup lang="ts">
defineExpose({
  name: 'cqs'
})
</script>

父组件通过ref获取

<template>
    <nameChange ref="refName"></nameChange>
</template>
<script setup lang="ts">
import nameChange from "./components/nameChange.vue";
 
const refName = ref<InstanceType<typeof nameChange>>()
onMounted(() => {
  console.log(refName.value);
})
 
</script>

四、mitt

通过插件mitt，相当于vue2的bus总线

注册

import { createApp } from 'vue'
import App from './App.vue'
import mitt from 'mitt'
 
const Mitt = mitt();
 
const app = createApp(App)
 
app.config.globalProperties.$Bus = Mitt;
 
app.mount('#app')

监听

<template>
 
</template>    
 
<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue';
type prop1 = {
    name: string
}
const title = ref('这是A组件')
const instance = getCurrentInstance()
instance?.proxy?.$Bus.on('changeName', (name:any) => {
    title.value = name
});
</script>

触发

<template>
    <button @click="changeName">修改name</button>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { getCurrentInstance } from 'vue';
const title = ref('这是B组件')
 
const instance = getCurrentInstance()
 
const changeName = () => {
    instance?.proxy?.$Bus.emit('changeName', '我是新数据')
}
</script>

五、v-model

父组件，可以添加v-model:textVal1.isSb自定义修饰符，通过textVal1Modifiers获取

<template>
    isShow：{{ value }}
    text: {{ text }}
    <dialcoag v-model:textVal1.isSb="text" v-model="value"></dialcoag>    
</template>
<script setup lang="ts">
import dialcoag from './components/dialoag.vue';
import { ref } from 'vue';
const value = ref<boolean>(true)
const text = ref<string>('cqs')
</script>
<style>
* {
    text-align: left;
}
</style>

子组件

<template>
    <div>{{ modelValue }}</div>
    <div>{{ textVal1 }}</div>
    <button @click="close">关闭</button>
</template> 
<script setup lang="ts">
const props = defineProps<{
    modelValue: boolean,
    textVal1: string,
    textVal1Modifiers?: {
        isSb: boolean
    } 
}>()
 
const emit = defineEmits(['update:modelValue', 'update:textVal1'])
 
const close = () => {
    emit('update:modelValue', false);
    emit('update:textVal1', props.textVal1Modifiers?.isSb ? 'dadadada' + 'sb' : '123456 ')
}
</script>