vue组件的自定义事件

1、定义

组件的自定义事件是给组件用的，而其他的事件是给原生html（h1，input）标签使用的

2、使用

一、子组件给父组件传递数据

假设父组件为app.vue，子组件为student.vue

在student.vue中

<template>
    <div>
        <button @click="getdata">点击按钮</button>
    </div>
</template>
<script>
export default{
    name:'student',
    data(){
        name:'张三'
    },
    methods:{
        getdata(){
            //将data中的name传递给app组件
            this.$emit('toapp',this.name,666,555)
        }
    }
}
</script>

在app.vue组件中，收到student.vue传过来的数据

<template>
    <div>
        <student @toapp='getstudentname' />
    </div>
</template>
<script>
import student from 'xxxx'
export default{
    name:'app',
    data(){
       return{
        }
    },
    methods:{
        //...是es6中的结构字符串
       getstudentname(name,...params){
            console.log('父组件收到了数据',name,params)
        }
    }
}
</script>

二、解绑自定义事件

在student.vue中进行解绑，加上一下按钮

适用于解绑一种自定义事件

<button @click="unbind">点击解绑自定义事件</button>

methods:{
    unbind(){
//解绑一个自定义事件
        this.$off('toapp')
//解绑全部自定义事件
        this.$off()
//解绑多个自定义事件
        this.$off(['toapp','demo'])
    }
}

3、模板例子

student.vue

<template>
    <div>
        <button @click="toapp">将数据交给父组件</button>
        <button @click="unbind">点击解绑自定义事件</button>
    </div>
</template>

<script>
export default {
    name: 'student',
    data() {
        return {
            name: '张三'
        }
    },
    methods: {
        toapp() {
            this.$emit('getstudentname', this.name, 555, 666);
        },
        unbind() {
            this.$off('getstudentname')
        }
    }
}
</script>

app.vue

<template>
  <div>
    <student @getstudentname="getstudentname"/>
  </div>
</template>

<script>
import student from './components/student.vue'
export default {
  name: 'App',
  components: {
    student
  },
  data(){
    return{
    }
  },
  methods:{
    getstudentname(name,...params){
      console.log(name,params);
    }
  } 
}
</script>