0
点赞
收藏
分享

微信扫一扫

vue3组件通信

子传父$emit

在vue框架中事件分为两种:一种是原生的DOM事件,另外一种自定义事件。

原生DOM事件可以让用户与网页进行交互,比如click、change、mouseenter、mouseleave...

自定义事件可以实现子组件给父组件传递数据。

vue2中的@click绑定的是自定义事件 ,可以通过.native修饰符变为原生DOM事件 。

vue3中绑定的是原生事件,利用defineEmits方法返回函数触发自定义事件,不需要引入,直接使用。

思路:在子组件上面绑定事件,利用defineEmits方法返回函数触发自定义事件,通过$emit将内容传给父组件上绑定的方法,父组件触发事件,将value进行赋值

子组件

<script step>
 const $emit = defineEmits(['dotChange'])
 const handleClick = ()=>{
   //父组件上绑定的方法
 		$emit('dotChange','传给父组件')
 } 
 </script>
<template>
 		<el-button onClick="handleClick">子组件按钮</el-button> 
 </template>

父组件

<script setup>
 important {ref} from 'vue'
const dot = ref('默认值')
 const $emit = defineEmits(['dotChange'])
 const handleClick = (value)=>{
 		dot.value = value
 } 
 </script>
<template>
 		<div dotChange="handleClick">子组件传过来的:{{ dot }}</div> 
 </template>

vue3组件通信_$emit

点击按钮传递成功!

vue3组件通信_defineEmits_02


举报

相关推荐

0 条评论