你好，
我想請教一個問題。
在Vite、Vue3的框架中，要怎麼使用emit呢?

因為我想自製一個彈出視窗的表單，圖與程式碼如下:
圖(將彈出視窗做成一個button元件，按下button表單就會顯示):


程式碼:

//App.vue
<script setup>
 import ButtonNext from './components/ButtonNext.vue'
</script>

<template>
  <ButtonNext />
</template>
<style>
  body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
</style>

//ButtonNext.vue
<script setup>
  import { ref } from 'vue'
  import FormOne from './FormOne.vue'
  //開啟
  const show_pop_up =ref(false)
  const pop_up=function(){
    show_pop_up.value=true
  }
  //關閉


</script>

<template>
    //開啟or隱藏表單
    <div :class="{active:!show_pop_up}">
      <div class="bg_gray"></div>//表單的灰色背景
      <div id="myModal">//表單的group，之後會v-if"name == 表單名稱"去選取表單
        <FormOne />
      </div>
    </div>
    <button @click="pop_up">//按鈕
      下一步
    </button>
</template>
<style scoped>
.active{
    display: none;
}
    .bg_gray{
        width: 100vw;
        height: 100vh;
        background-color: gray;
        opacity: 0.7;
        position: absolute;
        z-index: 2;
    }
    #myModal{
        width: 100vw;
        height: 100vh;
        position: absolute;
        z-index: 3;

        display: flex;
        justify-content: center;
        align-items: center;  
    }
        
</style>

//FormOne.vue
<script setup>
    import {ref} from 'vue'
    const click_cancel = function(){}
    const click_submit = function(){}
</script>

<template>  
    <form class="myForm">
        <h2>我是Title</h2>
        <input type="text" value="12313123">
        <div class="btnGroup">
            <button @click.prevent="click_cancel">取消</button>
            <button @click.prevent="click_submit">確認</button>
        </div>
    </form>
</template>
<style scoped>
.myForm{
    width: 300px;
    height: 500px;
    background-color: aquamarine;
    padding: 20px;
    position: relative;
}
    .btnGroup{
        position: absolute;
        z-index: 10;
        bottom: 30px;
        right: 30px;
    }
    .btnGroup button{
        margin-left: 10px;
    }
</style>

我想在FormOne.vue裡面，按下取消按鈕，去修改ButtonNext.vue的show_pop_up的值。
要怎麼辦呢?感謝。
還是有其他更好的方法可以參考?

已解決，感謝幫忙。
我想分享一下，給需要的人。
重點:defineProps與defineEmit皆在child組件裡定義。

//App.vue (parents)
<script setup>
  import Components from './Components.vue'

  const change = function(e){
    console.log(e);
  }
  const change2 = function(e){
    console.log(e);
  }
</script>
<template>
    <Components @change="change" @change2="change2" :foo='123'/>
</template>

//Components.vue (child)
<script setup>
    //定義emit跟props的變數
    const emit = defineEmits(['change', 'change2'])
    const props = defineProps({
        foo: String
    })
    //注意:props是個proxy，必須用物件的方式獲取變數值(props.foo)
    const click_cancel = function(){
        emit('change', false)
        console.log('我是props',props.foo);
    }
    const click_submit = function(){
        emit('change2', true)
        console.log('我是props',props.foo);
    }
</script>

<template>  
    <form>
        <button @click.prevent="click_cancel">取消</button>
        <button @click.prevent="click_submit">確認</button>
    </form>
</template>

如果大大對於彈出式表單有更好的寫法，可以分享一下嗎?感謝