Vue组件的Events为什么隔代也能触发

Question

我在使用某UI库的Dialog组件，因需要满足业务要求，对Dialog组件又进行了一次封装，如取名叫MyDialog，伪代码如下：

<template>
  <Dialog>
       ...
  </Dialog>
</template>

<script>
  ...
</script>

在原Dialog组件中有一个Events叫做hide，在每次Dialog隐藏时调用，而我把该Events绑定在MyDialog组件上时，也能被调用，伪代码如下：

<template>
  <MyDialog
    @hide="hideCallback"
  ></MyDialog>
</template>

<script>
  export default {
    method: {
      hideCallback() {
        console.log('hideCallback能被调用！')
      }
    }
  }
</script>

请问这是什么原理？

Answer 1

组件继承原因，
组件的 根 默认会继承父组件传递的 attrs。

关闭继承，新增组件选项，inherts:false