学习Vue的组件自定义事件总结

今天学习了将本地存储应用在前天做的TodoList案例上、还有组件自定义事件的基础使用。说重点的组件自定义事件吧，Vue里面把事件分为了两种，一种是内置事件另一种就是今天学习的自定义事件，内置事件是之前学习过的，比如click，keyup等等，这些事件有个共同点就是它们都是服务html标签的，直接拿来就可以使用了，不同于定义事件的是自定义事件是专门给组件使用的，在学习这个之前我们想要子组件给父组件传递数据只能是通过传递函数，然后在子组件的props配置项中接收传递过来的函数实现数据的传递，但组件自定义事件就可以代替这种比较麻烦的方法了，接下来要说的就是第一种组件自定义事件的步骤了，首先第一步要在父组件中给子组件标签定义一个自定义的事件名称，有两种写法，一种是标准形式（v-on:自定义事件名称）一种是简写形式（@自定义事件名称），这一步操作要清楚的知道这个事件是给子组件的组件实例对象（new VueComponent）绑定的事件，事件后面当然是跟着一个函数名，而调用这个函数要做的具体内容则写在在父组件的methods配置项中，第二步切换到子组件这边，这边要做的就是给想要触发的标签绑定一个内置的事件，而这个事件要触发的函数就是重点了，这个函数内我们想要触发刚才在父组件自定义的事件就要使用一个$emit方法，记得在这个方法前面加上this（因为是组件实例对象身上的方法），标准的写法是：this.$emit('自定义事件名称', 传给父组件的参数)，而这个参数就是我们想要传给父组件的数据，这个方法对比之前通过函数传递省去了在子组件中写props配置项的步骤。还有第二种组件自定义事件的方法，第二种方法在第一种方法的基础上只需改动父组件就可以实现，首先给父组件里面的子组件标签写上ref="自定义事件名称"，这样我们就可以在父组件实例对象身上使用$resf方法拿到子组件的实例对象了，具体的写法是：this.$refs.子组件名称，在拿到之前一般都配合着mounted钩子函数来使用，意思是等父组件挂载完毕了再去获取到子组件的实例对象，获取到之后就可以再使用一个叫$on的方法来监测子组件的自定义事件是否触发，事件名称后面紧跟着触发后父组件要执行的函数，同样这个函数也能接受子组件那边传来的参数（数据），具体的写法是：this.$refs.student.$on('子组件自定义事件名称'，this.父组件要调用的函数)，最后一种方法相对来说灵活很多，因为父组件直接拿到了子组件的实例对象，这样就可以控制子组件的触发时机。