组件自定义事件学习笔记

组件自定义事件_绑定

JS中有内置事件比如click,keyup。内置事件是给标签使用的,而自定义事件是给组件使用的。

子组件给父组件传递数据有两种方式

App父组件,School和Student是子组件。

子组件给父组件传递函数类型的props实现:子给父传递数据

在App中给School组件单项数据绑定getSchoolName,methods里面写getSchoolName(name),形参接收name,将方法传给School组件;

复制代码
<School :getSchoolName="getSchoolName" />

 methods: {
    getSchoolName(name) {
      console.log('App收到了学校名', name)
    }
  }

再在School组件当中接收数据

复制代码
 <button @click="sendSchoolName">把学校名给App</button>

    methods: {
        sendSchoolName() {
            this.getSchoolName(this.name)
        }
    }

现在使用第二种方法将学生名传给App。

通过父组件给子组件绑定一个自定义事件实现子给父传递数据(@或者v-on)

给Student组件的实例对象(vc)绑定了testa事件

复制代码
<Student v-on:testa="getStudentName" />

methods方法

复制代码
 getStudentName(name) {
      console.log('demo被调用了!', name)
    }

Student中定义click事件

复制代码
 <button @click="sendStudentName">把学生名传给App</button>

在Student的方法中定义click事件调用App的自定义事件testa(getStudentName方法传给了testa)

复制代码
 methods: {
        sendStudentName() {
            //触发Student组件实例身上的testa对象
            this.$emit('testa', this.name)
        }
    }

通过父组件给子组件绑定一个自定义事件实现子给父传递数据(ref)

在App中

复制代码
<Student ref="student" />

this. r e f s . s t u d e n t 是 S t u d e n t 的实例对象,可以绑定事件, refs.student是Student的实例对象,可以绑定事件, refs.student是Student的实例对象,可以绑定事件,on当testa被触发执行回调getStudentName;这种写法的好处是灵活性很好。比如等3s给Student实例绑定对象

复制代码
  mounted() {
    setTimeout(() => {
      this.$refs.student.$on('testa', this.getStudentName)
    }, 3000)
  },

思考小问题,如果只触发一次testa怎么设置
方法三将on改成once ``` this.refs.student.once('testa', this.getStudentName) ``` 方法2添加.once ```

开发技巧

如果开发中参数很多,可以使用ES6中的一种方法来接受参数

ES6 引入 rest 参数(形式为 ...变量名 ),用于获取函数的多余参数,这样就不 需要使用 arguments 对象了。rest 参数搭配的变量是一个数组,该变量将多余的 参数放入数组中。

复制代码
    getStudentName(name, ...params) {
      console.log('demo被调用了!', name.params)
    }

name接收一个参数,...params接收其余所有参数。

组件自定义事件_解绑

给谁绑定了自定义事件就给谁解绑。

在Student组件页面中给按钮设置解绑事件。

复制代码
 <button @click="unbind">解绑testa事件</button>

解绑一个自定义事件。

复制代码
 unbind() {
    this.$off('testa')
 }

解绑两个自定义事件

复制代码
this.$off(['testa', 'demo'])

解绑所有的自定义事件

复制代码
this.$off()

vm销毁的之后会移除所有的watchers 子组件和自定义事件,所以也可以直接销毁当前组件的实例,销毁后实例的所有的自定义事件失效

复制代码
  <button @click="destroyed">销毁当前组件的实例</button>

   destroyed() {
            this.$destroy()
   }

总结

  1. 组件的自定义事件适用于子组件给父组件传输数据
  2. 使用场景:A是父组件,B是子组件,B想给A传数据,就要在A中给B绑定自定义事件(事件回调在A中)
  3. 绑定自定义事件:
    (1).父组件中 <Demo @test="abc"/>或<Demo @test="abc"/>
    (2).父组件中
    ......
    mounted(){
    this. r e f s . x x x . refs.xxx. refs.xxx.on('test',this.abc)
    }
    (3).如果想要让自定义事件只能触发一次,可以使用once修饰符,或者$once方法。
  4. 触发自定义事件 this.$emit('test',数据)
  5. 解绑自定义事件 this.$off('test')
  6. 组件上也可以绑定原生Dom事件,需要使用native修饰符
  7. 注意:通过this. r e f s . x x x . refs.xxx. refs.xxx.on('test',回调)绑定自定义事件时,回调配置在methods中,或者是用箭头函数,否则会出现this指向问题。
    义事件 this.$off('test')
  8. 组件上也可以绑定原生Dom事件,需要使用native修饰符
  9. 注意:通过this. r e f s . x x x . refs.xxx. refs.xxx.on('test',回调)绑定自定义事件时,回调配置在methods中,或者是用箭头函数,否则会出现this指向问题。
相关推荐
递归不收敛21 分钟前
吴恩达机器学习课程(PyTorch 适配)学习笔记:3.4 强化学习
pytorch·学习·机器学习
烧冻鸡翅QAQ22 分钟前
考研408笔记
笔记·考研
Keepreal49624 分钟前
使用Canvas绘制转盘
javascript·vue.js·canvas
StarPrayers.25 分钟前
卷积层(Convolutional Layer)学习笔记
人工智能·笔记·深度学习·学习·机器学习
ScriptBIN38 分钟前
Javaweb--Vue
前端·vue.js
前端Hardy1 小时前
Vue 高效开发技巧合集:10 个实用技巧让代码简洁 50%+,面试直接加分!
前端·javascript·vue.js
能不能别报错1 小时前
K8s学习笔记(十五) pause容器与init容器
笔记·学习·kubernetes
无言以对,沉默不语,随你随你。1 小时前
【解决办法】GitBash不能在任意文件夹打开
经验分享·笔记·git
ᖰ・◡・ᖳ1 小时前
JavaScript:神奇的ES6之旅
前端·javascript·学习·es6
小马学嵌入式~2 小时前
堆排序原理与实现详解
开发语言·数据结构·学习·算法