2.组件间通信-自定义事件（子传父）

本文主要是介绍2.组件间通信-自定义事件（子传父），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

子传父
父组件：

<template><div class="father"><h3>父组件</h3><h3 v-show="toy">父组件接收到子组件传过来的数据:{{ toy }}</h3><!-- 给子组件Child绑定自定义事件 --><Child @send-toy="saveToy"/></div>
</template>
<script setup lang="ts" name="Father">import Child from './Child.vue'import { ref } from "vue";let toy = ref('')function saveToy(value:string){toy.value = value }
</script>
<style scoped>.father{background-color:rgb(165, 164, 164);padding: 20px;border-radius: 10px;}.father button{margin-right: 5px;}
</style>

子组件：

<template><div class="child"><h3>子组件</h3><h4>玩具：{{ toy }}</h4>//触发自定义事件<button @click="emits('send-toy',toy)">子组件传递数据给父组件</button></div>
</template><script setup lang="ts" name="Child">import { ref } from "vue";// 数据let toy = ref('奥特曼')let  emits= defineEmits(['send-toy'])
</script>
<style scoped>.child{margin-top: 10px;background-color: rgb(76, 209, 76);padding: 10px;box-shadow: 0 0 10px black;border-radius: 10px;}
</style>

这篇关于2.组件间通信-自定义事件（子传父）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---