自定义事件

基础语法

v-bind(缩写 :):绑定DOM 元素的属性 / 特性,关联 “数据→视图”,核心是 “传数据”;

v-on(缩写 @):绑定DOM 元素的事件,关联 “视图→逻辑”,核心是 “响应用户操作”;

二者是 Vue 模板中最基础的两个指令,分别处理 “数据渲染” 和 “交互逻辑”,是 Vue 响应式开发的核心基础。

逻辑图

image.png

前端通过el属性和Vue对象建立联系

前端通过插槽(slot)和 组件建立联系

但是我们想要在组件中删除Vue对象的数据是做不到的。要想实现需要借助自定义事件这个中间桥梁

image.png

达到效果

让子组件的消息模版可以删除vue对象中的数据。原来是只有父组件的消息模版可以删除vue对象中的数据

自定义事件的实现方法

  1. 在vue对象中创建删除方法
  2. 在组件中定义自定义事件方法 (使用 this.$emit(事件名))
  3. 在前端通过@事件名(因为他也是一个方法所以使用@) 和 组件进行绑定, 通过 @事件名="vue对象的方法名称" 和vue对象建立联系

image.png

image.png

0个评论
点击登录,快来和大家讨论吧~
表情
图片
暂无评论
守望
下载 APP