vue3在子组件中触发的父组件函数方式

子组件

1 2 3 4 5 6 7 8 9

<template>      //我派发出了事件，这个事件的命名为myclick，连接至父组件   <button @click="emit('myclick')">Emit</button>      //我啥都没派发   <button>noneEmit</button>    </template>

1 2 3 4 5 6 7

<script setup> import { defineEmit } from 'vue'      // 定义派发事件 const emit = defineEmit(['myclick'])    </script>

父组件

1 2 3 4 5 6

<template>       //子组件使用通信的 @myclick事件 → 使用父组件函数   <HelloWorld @myclick="onmyclick"/>    </template>

1 2 3 4 5 6 7 8 9 10 11

<script setup>    //导入子组件 import HelloWorld from './components/HelloWorld.vue';     //子组件使用使用父组件函数 const onmyclick = () => {   console.log(" Come from HelloWorld! "); }     </script>

方式二

先获取上下文对象，通过该对象的emit()方法进行事件的传出，其他同上

子组件

1 2 3

<template>     <button @click="emitclick">emitclick</button> </template>

1 2 3 4 5 6 7 8 9

<script setup>  import { useContext } from 'vue'     // 获取上下文 const ctx = useContext();  const emitclick = () => {    ctx.emit('myclick'); }  </script>  // 不使用语法糖 // 子组件组件 setup(props, context) { function fnxx () { context.emit(''myclick'', [实参]); } }

父组件 

1 2 3 4 5

<template>       //子组件使用通信的 @myclick事件 → 使用父组件函数   <HelloWorld @myclick="onmyclick"/> </template>  <script setup> import HelloWorld from './components/HelloWorld.vue';    const onmyclick = () => {   console.log(" Come from HelloWorld! "); }  </script>