javascript - VueJS，组件层次结构如何在层次结构中多次使用一个组件

Question

我需要在从根组件开始的层次结构中多次使用一个组件。

下面是根的代码Comp1

<template>
  <alert/>
  <modal/>
  <button @click='showAlert()'></button>
</template>
<script>
  import modal from './Modal'
  export default{
    components: {
      modal
    },
    methods: {
      showAlert(){
        //code that shows the alert
      }
    }

  }
</script>

下面是子组件的代码modal

<template>
  <grandchild/>
</template>
<script>
  import grandchild from './GrandChild'
  export default{
    components: {
      grandchild 
    }
  }
</script>

下面是代码grandchild

<template>
  <alert/>
  <button @click='showAlert()'></button>
</template>
<script>
  export default{
    methods: {
      showAlert(){
        //code that shows the alert
      }
    }

  }
</script>

alert是一个全局可用的模态组件，具有很大的z-index价值，以确保它显示在其他组件之上。当调用showAlert()in时，Comp1正在显示的警报是组件中的警报modal。为什么会这样？

标签： javascriptvuejs2