[JavaScript知识库]前端之vue自定义事件

事件

分为js内部事件(click, keyup, … 由html元素使用 ) 与 自定义事件( 为vue组件服务 )

组件使用原生事件

native指定该组件使用原生事件

组件使用自定义事件

绑定事件 – 子给父传递数据

方法一: 父给子组件一个方法 – 通过v-bind和props

父 (用v-bind传递给子组件)

getStudentEvent 是被传递的方法

  methods: {
    getSchoolName(name) {
      console.log("学校姓名", name);
    },
  },

子

// 接收
  props: ["getStudentEvent"],

// 使用
  methods: {
    sendSchoolName() {
      this.getSchoolName(this.name);
    },
  },

方法二: 自定义事件 – 父组件通过v-on绑定事件和子组件通过$emit触发事件

v-on给元素绑定事件, 也可以给组件绑定事件,
(与方法一相比, 少了中间商赚差价的感觉)
1.用 v-on 给组件绑定自定义事件,
2.在组件中, 用vc的$emit(‘事件名’, ‘数据’)来触发事件

getStudentEvent是给子组件上绑定的自定义事件名

    <button @click="sendStudentNameToApp">sendStudentNameToApp</button>

  methods: {
    sendStudentNameToApp() {
      this.$emit("getStudentEvent", this.name);
    },
  },

方法三: $ref

用$ref获取子组件, 然后用$on来给子组件绑定自定义事件
好处是更灵活, 比如使用serTimeout(
// 挂载内容
,2000)在页面放入真实dom后的两秒后才绑定自定义事件

但是要注意: $on绑定事件的回调函数内的this是触发事件的组件实例对象, 可以将回调函数写成箭头函数
ref相当于html 中的 id

    <StudentInfo ref="student" />

    //this.$refs.student 获取StudentInfo子组件
	  mounted() {
    this.$refs.student.$on("getStudentEvent", this.getStudentName);
  },

在父组件中的mounted内, 使用$on在子组件上绑定事件回调函数,
在子组件中, 使用$emit触发对应事件(并传递参数)
好处: 相较于方法二更灵活

传递多个数据

方法一: 对象法

this.$emit("事件名", {key1:vulue1, key2:value2, 等等})

方法二: …数组名
将多个变量, 转换为一个数组

this.$emit("事件名", {key1:vulue1, key2:value2, 等等})

// 接收 (注意参数)
getStudentName(key1, ...params) {
  console.log(key1, params);
},
// params 对应key1以后的所有参数

解绑自定义事件 – $off(‘eventName’)

// 解绑一个
this.$off('eventName1');

// 解绑多个 用数组
this.$off(['eventName1','eventName2']);

// 解绑所有
this.$off();

( this.$destroy() )组件被销毁了, 它身上的自定义事件也失效了,
但是js原生事件还生效, 但是vue不支持渲染了.

总结:

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖