vue2中动态组件抛出点击事件

在 Vue2 中，动态组件可以使用 `is` 属性来指定当前要渲染的组件，如果需要在动态组件中抛出一个点击事件，可以在子组件中使用 `$emit` 方法来触发父组件的事件。

以下是一个简单的例子，演示了如何在动态组件中抛出一个点击事件：

父组件：

<template>
  <div>
    <button @click="toggleComponent">Toggle Component</button>
    <component :is="currentComponent" @child-click="handleChildClick"></component>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  components: {
    ComponentA,
    ComponentB,
  },
  data() {
    return {
      currentComponent: 'ComponentA',
    }
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA'
    },
    handleChildClick() {
      console.log('Child component clicked')
    },
  },
}
</script>

子组件：

<template>
  <div @click="handleClick">
    {{ message }}
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: '',
    },
  },
  methods: {
    handleClick() {
      this.$emit('child-click')
    },
  },
}
</script>

在上面的代码中，父组件中通过 `component` 标签渲染动态组件，并通过 `is` 属性指定当前要渲染的组件。当点击子组件时，子组件会使用 `$emit` 方法触发 `child-click` 事件，并通过父组件的 `@child-click` 监听该事件，从而实现了在动态组件中抛出一个点击事件的功能。