vue子组件向父组件传值 emit

子组件向父组件传值主要流程是，子组件通过emit（）方法传递一个事件和值给父组件，父组件通过事件获取子组件传递过来的值然后编写逻辑代码。下面代码是子组件child的input框值传递给父组件，通过emit（“”，“”）传递一个事件和一个值给父组件。

下面是子组件代码

<template>
  <div>
    <input v-model="iptValue" >
    <button @click="handleParent">把input值传给父组件</button>
  </div>
</template>

<script>
import {ref} from 'vue';
export default {
  name:"Child",

  setup(props,context){

  const {emit}=context;
  const iptValue=ref("lgy")
  const handleParent=()=>{
    emit("sendParent",iptValue.value)
  }
  return{
    handleParent,iptValue
  }


  }
}

</script>

<style>

</style>

父组件代码

<template>
  <div>
    <Child @sendParent="handlePra"></Child>
  </div>
</template>

<script>
import Child from '@/components/Child.vue';
export default {
  components: {
    Child
  },
// methods:{
//   handlePra(e){
//     console.log("子传父",e)
//    }
// },
  setup(){
   const handlePra=(e)=>{
    console.log("子传父",e)
   }
   return{handlePra}

  },

}
</script>

<style>

</style>