VUE3.0 在子组件中触发的父组件函数

VUE3——子组件触发父组件函数

注：本文是基于VUE3.0的语法

方式一：

• 在script中引入 defineEmit ，import { defineEmit } from 'vue' ;
• 通过defineEmit定义事件，例如：const emit = defineEmit(['myclick']);
• 子组件定义了ClickEmit 事件，并且返回了一个函数，在点击事件里通过 emit("myclick") 传递出事件给父组件
• 在父组件中的 引用的子组件的标签上定义上要传递的事件，具体代码如下

子组件：

<template>

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

  //我啥都没派发
  <button>noneEmit</button>

</template>
 
<script setup>
import { defineEmit } from 'vue'  

// 定义派发事件
const emit = defineEmit(['myclick'])

</script>

父组件：

<template> 

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

</template>

<script setup>

//导入子组件
import HelloWorld from './components/HelloWorld.vue'; 


//子组件使用使用父组件函数
const onmyclick = () => {
  console.log(" Come from HelloWorld! ");
} 

</script> 

方式二：

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

子组件：

<template>  
  <button @click="emitclick">emitclick</button>
</template>
 
<script setup> 
import { useContext } from 'vue' 

// 获取上下文
const ctx = useContext(); 
const emitclick = () => { 
  ctx.emit('myclick');
} 
</script> 

父组件： 

<template> 

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

<script setup>
import HelloWorld from './components/HelloWorld.vue';
 
const onmyclick = () => {
  console.log(" Come from HelloWorld! ");
} 
</script>