【Vue 自学笔记】自定义组件监听事件、子组件向父组件传递数据

回顾

上次学到了 Vue 的单向数据传递，提到了子组件向父组件传递数据可以使用事件来实现。

自定义事件

defineEmits()方法：用于自定义组件的事件。
输入：事件名称的字符串数组。
返回值：emits 对象，用于定义组件可以触发的自定义事件。
示例如下：

let emit = defineEmits(
    ['my-event']
);

['my-event']数组： 数组中的每个字符串代表一个事件名。在这个例子中，组件可以触发一个名为 my-event的事件。

子组件向父组件的数据传递

完成了自定义事件，假如我们想实现点击子组件的图片就向父组件传递消息，该如何做呢？
传递消息，意味着子组件需要向父组件返回值。这里就需要让自定义的事件发送我们想要传递的值给父组件。

1. 为子组件的图像绑定点击事件，并在点击事件中实现向父组件发送数据，主要看onImgClick()函数：

   <script setup>
   let props = defineProps({
     url: {
       required: true
     },
   });
   let emit = defineEmits(
       ['my-event']
   );
   function onImgClick(){
     const return_val = "return message" //我们要返回的消息
     emit("my-event", return_val) // 向事件发送数据
   }
   </script>
   
   <template>
     <img @click="onImgClick" :src=" props.url"/>
   </template>
   

   onImgClick()函数主要完成这样的功能：触发名为my-event 的自定义事件，然后向父组件发送return_val这个变量的值，实际上可以传递任何类型的数据，比如字符串、数字、对象等。

2. 父组件监听事件，接收来自事件的数据，并显示地更新在 span 里：

   <script setup>
   import swpier from './components/swiper.vue'
   import url from '@/assets/logo.svg'
   import {ref} from "vue";
   var message = ref('init')
   function fromSub(event){
     console.log('接收到来自子组件的返回内容:', event)
     message.value=event
   }
   </script>
   
   <template>
     <swpier :url="url" @my-event="fromSub"></swpier>
     <span>{{message}}</span>
   </template>
   

   这里，为my-event事件绑定了 fromSub函数，当监听到事件返回值时，就会打印出返回的数据，并更新响应式对象。

实操查看结果：
点击图片前：

当我点击图片后，父组件打印的消息和更新的值正是子组件回传的。