阅读 259

Vue中的自定义事件

这是我参与8月更文挑战的第30天,活动详情查看:8月更文挑战

定义自定义事件

VUE中我们会经常使用到vue的内置事件,例如click,mouseover...等等之类的,在父组件给子组件传递数据的时候,用的是props,但如果子组件要把数据传递回去,就需要使用自定义事件

子组件(school.vue)

    <template>
  <div>
        <h3>school name:{{name}}</h3>
        <h3>school address:{{address}}</h3>
        <button @click="sendSchoolName" >获取学校名</button>
        <button @click="unbind">解绑事件</button>
  </div>
</template>

<script>
export default {
    data() {
        return {
            name:'猩猩乐园',
            address:'花果山'
        }
    },
    methods:{
        sendSchoolName(){
            //触发自定义事件
            this.$emit('badspider',this.name,2,3,4,1,4,2)
        },
        unbind(){
            //只能解绑一个自定义事件 
            this.$off('badspider')
            
            // 解绑多个自定义事件
            // this.$off(['badspider','demon'])
            
            // 解绑所有的自定义事件
            // this.$off()
        }
    }
}
</script>

复制代码

父组件

    <template>
        <div id="app">
            <school @badspider='demon'></school>
        </div>
    </template>
    <script>
import school from './components/school'

export default {
  name: 'App',
  components:{student,school},
  data(){
    return {
      msg:'badspider'
    }
  },
  methods:{
    demon(name,...params){
      console.log('school name is:',name,params);
    },
  }
}
    </script>
复制代码

我们来看一下这些代码,首先你要定义一个事件,就和平时绑定一个事件一样,用v-on:badspider="xxx"一样,就是事件名字不再是click了,而是你自己自定义的名字了, 后面的xxx是一个回调函数,当触发了这个事件的时候,这个回调函数就会被调用


就和click一样,它的触发条件就是点击一下,那么我们的这个badspider该怎么触发呢,这个时候就需要一个方法了,就是$emit('badspider'),这样子的话这个事件就可以被触发,如果你需要传入参数的话,就直接在后面加就可以了,也可以传入多个参数$emit('badspider',name,1,2,3,4)然后我们再去父组件里面接收就可以了,可以使用ES6的语法来接收demon(name,...params),这样子的话就可以接收到name 和 一个数组了

自定义事件的解绑

当你的自定义事件不需要使用的时候,你就可以给这个事件给解绑掉,如果你要解绑的是一个事件的话,就可以使用$off('badspider'),如果你要解绑多个事件的话,off(['badspider','xxx','xxxx]就是传入的参数是一个数组,也可以使用$off()这样子的话就是解绑全部的自定义事件

文章分类
前端
文章标签