1. emit event
child component
1
2
3
4
5
6
7
8
9
10
11
12
13
| <template>
<button @click="foo">Button</button>
</template>
<script>
export default {
name: 'my-button',
methods:{
foo () {
this.$emit('onClick')
}
}
}
</script>
|
parent component
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <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
1
2
3
4
5
6
7
8
9
10
11
12
13
| <template>
<button @click="onClick">Button</button>
</template>
<script>
export default {
name: 'my-button',
props: {
onClick: {
type: Function
}
}
}
</script>
|
parent component
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <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内部是无法校验的，不过第一种也只是回避，本来就不校验
