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>