vue3前端开发,子组件向父组件传递数据练习！
<script setup>
import Child from './Child.vue'
const getMsg = (msg)=>{console.log(msg);
}
</script>
<template><h3>Parent</h3><!--绑定事件--><Child @get-Msg="getMsg"/>
</template>这个是Paren.vue的组件内容，
<script setup>
//1,通过defineEmits()-> emit(this.$emit)
const emit = defineEmits(['get-msg'])
const sendMsg = ()=>{emit('get-msg','this is child msg')
}
</script>
<template><h3>Child</h3><button @click="sendMsg">触发子组件</button>
</template>这个是子组件的内容。
<template><h3>入口文件</h3><!-- <Base /> --><!-- <SetupDemo /> --><!-- <ReactiveDemo /> --><!-- <ComputedDemo /> --><!-- <WatchDemo2 /> --><!-- <MutationsDemo /> -->
<!-- <LifeDemo /> -->
<!-- <ImageDemo2 /> -->
<Parent />
</template><script setup>
import Base from './components/Base.vue'
import SetupDemo from './components/SetupDemo.vue'
import ReactiveDemo from './components/ReactiveDemo.vue'
import ComputedDemo from './components/ComputedDemo.vue'
import WatchDemo from './components/WatchDemo.vue'
import MutationsDemo from './components/MutationsDemo.vue'
import WatchDemo2 from './components/WatchDemo2.vue'
import LifeDemo from './components/LifeDemo.vue'
import ImageDemo2 from './components/ImageDemo2.vue'
import Parent from './components/Parent.vue'
import Child from './components/Child.vue'
</script>这个是入口文件的内容。
如图所示，成功获取到了，来自子组件的信息。
核心思想。
主要是借助于一个宏函数，defineEmits来做一个包装。它可以把父组件里面定义的函数，包装起来。然后传递到子组件里使用。
在子组件里面就可以借助和这个emit对象来调用父组件里定义的函数了，通过函数的形式，实现了数据的传递。
