vue3前端开发,子组件向父组件传递数据练习

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对象来调用父组件里定义的函数了，通过函数的形式，实现了数据的传递。