Vue 自定义事件实现子组件数据向父组件传输

除了props子组件给父组件传输,还可以用自定义事件实现子组件数据向父组件传输。

第一种方式: 通过父组件给子组件绑定一个自定义事件实现子给父传数据 使用v-on或@ 结合student.vue中的sendStudentName 的emit。 如果只能点击一次则

v-on:studentName.once

App.vue




传输多个自定义事件:

  

student.vue


  
  
  

第二种方式:通过父组件给子组件绑定一个自定义事件实现子给父传数据 使用ref和mounted 结合student.vue中的sendStudentName 的emit

App.vue如下 $emit写法和上面student.vue中一样




特别注意:

1.如果组件里面写了@click这种dom的操作事件,组件会认为这是个自定义事件。所以要想为组件中的dom操作事件,只需要 @click.native加个native即可。
2. this.$refs.student 这里this指的是student组件并不是App,student触发则this就是student。如果是this.getStudentName getStudentName是App.vue method里面方法则这个里this就是App。如果mounted里面写的是普通function方法则这里this也是App。
3.只触发一次则this.$refs.student.$once('studentName',this.getStudentName)再点击没反应。

你可能感兴趣的:(vue,vue)