vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3子组件触发父组件函数

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

作者:Cirtus Soda

这篇文章主要介绍了vue3.0在子组件中触发的父组件函数方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

注:本文是基于vue3.0的语法

方式一

子组件

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文