526互联

defineEmits传值（子传父）

发布时间 2023-03-27 16:47:03作者: Felix_Openmind
//子组件
<template>
    <div class="child">
        我是子组件
    </div>
</template>
<script setup>
import {defineEmits,onMounted} from 'vue'
const emit = defineEmits()
onMounted(()=>{
    emit('getChildMsg','我是子元素，给父元素传的话')
    emit('secChildMsg','我是子组件，这是传给父组件的第二句话')
})
</script>
​
​
​
//父组件
<template>
  <div class="box">
    <!-- 接收子组件的方法 -->
    <v-child @getChildMsg="getMsg" @secChildMsg="hSecChildMsg"></v-child>
  </div>
</template>
<script setup>

// 引入后无需注册
import vChild from "../components/child.vue";

let getMsg = e => {
  console.log(e); //我是子元素，给父元素传的话
};
const hSecChildMsg = e => {
  console.log(e); // 我是子组件，这是传给父组件的第二句话
};
</script>