Vue3 emit和provide

emit

选项式api，不是组合式 emit

<!-- ParentComponent.vue -->
<template><ChildComponent @custom-event="handleChildEvent" />
</template><script>
export default {methods: {handleChildEvent(data) {console.log("父组件收到子组件的事件:", data);},},
};
</script>

<!-- ChildComponent.vue -->
<script>
export default {methods: {triggerEvent() {this.$emit("custom-event", { message: "Hello from child!" });},},
};
</script>

传递复杂数据类型

<!-- ChildComponent.vue -->
methods: {sendData() {const payload = {id: 123,details: ["detail1", "detail2"],};this.$emit("data-sent", payload);},
},

//父组件可通过解构参数直接使用数据
handleDataSent({ id, details }) {console.log("ID:", id);        // 输出 123console.log("Details:", details); // 输出数组
}

组合式Api

<!--子组件-->
<script setup>
</script>
<template><div><h2>子组件</h2><button @click="$emit('nozht')">通知父组件</button></div>
</template>

<script setup>
import index from './components/index.vue';
const handleEvent = () => {alert('获得子组件事件');
};
</script>
<template>
//  v-on 指令 引用名称=执行事件<index v-on:nozht="handleEvent"  />
</template>

Provide/Inject

<!-- 父组件 -->
<script setup>
import { ref,provide } from 'vue';
import zht1 from './components/zht1.vue';
provide('mesg', 'Provide/Inject 中的信息内容');
</script>
<template><h1>父组件</h1><zht1 />
</template>

<script setup>
import zht2 from './zht2.vue';
</script>
<template><h1>子组件</h1><zht2 />
</template>

<script setup>
import { inject } from 'vue';
const mesg = defineProps(['mesg']);
const mesg2 = inject('mesg');
</script>
<template><h1>孙组件</h1><p>{{ mesg }}</p><p>{{ mesg2 }}</p>
</template>

子组件中更新父组件参数值

<script setup>
import { ref,provide } from 'vue';
import zht1 from './components/zht1.vue';
provide('mesg', 'Provide/Inject 中的信息内容');
const count = ref(0);//累加函数
const addCount = () => {count.value++;
};
provide('count', count);
provide('addCount', addCount);//装入函数
</script>
<template><h1>父组件</h1><zht1 />
</template>

zht2.vue

<script setup>
import { inject } from 'vue';
const mesg = inject('mesg');
const count = inject('count');
const addCount = inject('addCount');
</script>
<template><h1>孙组件</h1><p>{{ mesg }}</p><p>Count:{{ count }}</p><button @click="addCount">Count累加+1</button>
</template>

传递对象

<script setup>
import { ref,provide } from 'vue';
import zht1 from './components/zht1.vue';
provide('mesg', 'Provide/Inject 中的信息内容');
const count = ref(0);
const addCount = () => {count.value++;
};//传递对象
provide('count', {count,addCount,
});
</script>
<template><h1>父组件</h1><zht1 />
</template>

//在zht2.vue组件中，我们使用inject接收count的对象，使用解构函数提取count和addCount的引用。
<script setup>
import { inject } from 'vue';
const mesg = inject('mesg');
const { count, addCount } = inject('count');
</script>
<template><h1>孙组件</h1><p>{{ mesg }}</p><p>Count:{{ count }}</p><button @click="addCount">Count累加+1</button>
</template>