Vue组件抛事件和Function prop的差别

1. emit event

child component

<template>
  <button @click="foo">Button</button>
</template>
<script>
export default {
  name: 'my-button',
  methods:{
    foo () {
      this.$emit('onClick')
    }
  }
}
</script>

parent component

<template>
  <my-button @onClick="handleClick"></my-button>
</template>
<script>
import myButton from '@/components/myButton'
export default {
  components: { myButton }
  methods: {
    handleClick () {
      console.log('boo')
    }
  }
}
</script>

2. props function

child component

<template>
  <button @click="onClick">Button</button>
</template>
<script>
export default {
  name: 'my-button',
  props: {
    onClick: {
      type: Function
    }
  }
}
</script>

parent component

<template>
  <my-button :onClick="handleClick"></my-button>
</template>
<script>
import myButton from '@/components/myButton'
export default {
  components: { myButton }
  methods: {
    handleClick () {
      console.log('boo')
    }
  }
}
</script>

3. 实验结果和理解

父组件不知道事件什么时候会发生,因为事件的监听和处理都在子组件

子组件不知道父组件在事件发生后干什么,因为干什么是执行的父组件里的method

子组件要求父组件提供一个Callback函数,当事件发生时子组件去回调父组件提供的Callback函数

两种方式的运行结果是一样的,写法上和理解上有差别。

  1. 在emit的情况下

    父组件能够监听到事件的发生,并且决定在事件发生时做什么

  2. 在props的情况下

    父组件不知道事件发生与否,只能指令子组件在发生时做什么处理

4. 可能的问题

  1. 是否存在父组件要对子组件产生的事件进行搜集并处理? 第二种方式可能就歇菜
  2. 第二种方式对传入的Function内部是无法校验的,不过第一种也只是回避,本来就不校验

发布者

《Vue组件抛事件和Function prop的差别》上有1条评论

发表评论

电子邮件地址不会被公开。

This site uses Akismet to reduce spam. Learn how your comment data is processed.