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

发表于 2018-01-15 分类于技术评论数：本文字数： 1.6k 阅读时长 ≈ 3 分钟

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函数

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

在emit的情况下

父组件能够监听到事件的发生，并且决定在事件发生时做什么
在props的情况下

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

4. 可能的问题

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

0%