Vuetify中<v-dialog>嵌套<v-icon>（activator="parent"）无法触发的问题

问题原因 #

<v-icon>没法像<v-btn>这类组件触发设置了activator="parent"的v-dialog，核心原因是：Vuetify的activator="parent"机制要求父组件内置支持activator的事件绑定逻辑，但<v-icon>本质是封装原生<i>标签的轻量组件，没有专门实现与子级activator组件联动的接口，点击时无法把触发信号传递给嵌套的v-dialog。

无需自定义点击处理的快速解决方法 #

方法1：用v-btn包裹v-icon #

借助支持activator机制的<v-btn>作为父容器，把v-icon放在按钮内部，就能正常触发对话框：

<v-btn icon>
  <v-icon icon="mdi-check"></v-icon>
  <v-dialog activator="parent">
    点击图标可打开对话框
  </v-dialog>
</v-btn>

方法2：使用activator插槽（推荐） #

这是Vuetify官方推荐的写法，灵活性更高，能直接适配v-icon：

<v-dialog>
  <template v-slot:activator="{ on, attrs }">
    <v-icon icon="mdi-check" v-bind="attrs" v-on="on"></v-icon>
  </template>
  点击图标即可打开对话框
</v-dialog>

内容的提问来源于stack exchange，提问作者DigitalJedi