一、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>