二、子组件向父组件传值

1、$emit

$emit用于事件之间的传递，可以实现子组件传参给父组件

$emit主要是可以在子组件中触发父组件里面的方法(（这个可能小白会晕了,可能我一开始比较笨，-，明明说是子传给父，为什么是子组件中触发父组件的方法，因为这个类似于桥梁，我要过桥，需要桥，这里就是子组件的方法是将方法fn作为参数去传给父组件，然后父组件将中使用子组件的时候就可以在<子组件 @fn="function">)

上面是我的废话

$emit通信，子传父：子组件中绑定点击事件，methods中注册事件

通过this.$emit('fn',option)暴露给父组件，父组件在使用子组件的时候绑定事件fn，然后在父组件的methods中编写该方法

看看代码：

<template>
    <div>
        我是父组件
        <ChildrenVue @myClick='onMyClick' />
    </div>
</template>
<script setup>
import ChildrenVue from '../components/Children.vue';
//父组件定义自定义事件onMyClick
//监听子组件的自定义事件myClick
const onMyClick = (msg) => {
    //获取参数
    console.log(msg);
}
</script>

<template>
    <div>
        我是子组件
        <button @click="handleClick">按钮</button>
    </div>
</template>
<script setup>
import { defineEmits } from 'vue'
//获取emit
const emit = defineEmits()
//定义点击事件handleClick
//定义自定义事件myClick
//传递信息
const handleClick = () => {
    emit('myClick', '我是子组件给父组件的')
}
</script>

Vue的传值方式（二）

二、子组件向父组件传值

1、$emit