vue3 父组件调用子组件里的事件方法

父组件
<ChildVue ref="childRef" />  父组件调用子组件的时候设置ref值。
const childRef = ref();vue3可以通过ref方法获取
childRef.value.方法名()   使用

子组件
const foo = () => {
  console.log("foo");
}
defineExpose({
  foo
});

子获取父

第一种

子组件
import { defineEmit } from 'vue'  
// 定义派发事件
const emit = defineEmit(['myclick'])

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

第二种  获取上下文对象

子
import { useContext } from 'vue' 
 
// 获取上下文
const ctx = useContext(); 
const emitclick = () => { 
  ctx.emit('myclick');
} 

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值