组件的自定义事件

父子之间传值来引入问题。
在以往的方法中，要从父往子传值，可以使用props，直接传值。从子向父传值，需要将父的方法通过props传递给子，然后子接收后调用方法。然后完成传值。但是这样子操作耦合性太强，不好分离模块化。
因此引入一个新的写法。组件自定义事件。
写法：

  1. v-on方法。直接在子组件的标签上绑定上自定义事件，并于自己的方法绑定。
    例：<Student v-on:action="getStudentName"/>其中action是我们自定义的事件名，他会和 Student相关联。然后被绑定到父组件的getStudnetName方法上。注意：他会将action自定义事件绑定再vc标签所对应的vc实例上。
    其次，再在Student组件中，你需要定义一个方法，绑定一个按钮或者什么事件来触发方法，用这个方法来触发你所自定义的事件,然后与父组件的方法联动使用。
    1
    2
    3
    4
    5
    6
    7
    8
    <button @click = "getName">点我</button>
    ....
    methods:{
      getName(){
        this.$emit('action')//你所绑定的自定义事件action
        this.$emit('badspider',this.name,2,3,4,1,4,2)
      }
    }

扩展

  1. 我们目前所使用的都是直接绑定v-on:action，就是直接绑定了事件，倘若我们不需要直接绑定自定义事件，或者延时绑定的话，可以在父组件中写一个钩子，通过ref直接获取子组件再来进行绑定。

    ref属性，可以直接获取子组件的实例对象

1
2
<Student ref="student">
//通过this.$refs.student获取该实例对象

绑定

image

1
2
3
4
5
6
7
8
9
10
11
12
mountd(){
  this.$refs.student.$on('action',this.getStudentName)
//获取该实例对象，然后绑定自定义事件和方法
}
//也可以不写方法来绑定，而是直接绑定一个方法
mountd(){
  this.$refs.student.$on('action',()=>{this.Item = ...})
//注意，用$on绑定后，默认会传递回他本来的`this`即`Student`，所以这里使用括号函数，让`this`指向`App`.
}
//若是只想绑定后只触发一次，可以有一下两种操作
@action.once或者this.$refs.student.$once()
这两种都可以只触发一次

所有在组件标签上的事件都会被vue认为时自定义事件，为了可以定义js原生的事件例如click,可以加入.native
例如<Student @click.native="getStudentName"></Student>

解除绑定使用$off()

生命周期

image
this.$destroy()
他的销毁过程不会破坏他本身的dom节点，即你给一个点击事件绑定了一个方法，他依然会有点击事件发生，但他所绑定的自定义事件都不会发生了,他绑定的方法任然存在