Vue子组件按钮点击触发父组件Modal的写法是否正确？

你在v-dialog标签上绑定@btnClicked="showModal"的写法有误。

错误原因 #

btnClicked是panelHeader.vue子组件内部通过$emit触发的自定义事件，监听器必须绑定在触发事件的组件标签上才能生效。v-dialog是Vuetify的内置弹窗组件，本身不会派发btnClicked事件，绑定在它上面的监听器永远不会执行。
同时v-dialog组件本身通过v-model接收布尔值控制显隐，不支持通过监听外部自定义事件触发弹出。

正确实现 #

1. 父组件中先引入、注册panelHeader子组件
2. 父组件内定义一个布尔值响应式变量，默认值为false，专门控制弹窗显隐
3. 将@btnClicked="showModal"绑定到<panelHeader />子组件标签上，触发时将上述布尔值设为true
4. 给v-dialog绑定v-model关联该显隐变量，变量为true时弹窗自动展示

参考代码（父组件index.vue） #

<template>
  <!-- 自定义事件绑定在触发它的子组件上 -->
  <panelHeader
    name="面板标题"
    sub-title="面板说明文字"
    @btnClicked="showModal"
  />

  <!-- 弹窗通过v-model绑定显隐状态 -->
  <v-dialog
    v-model="isModalShow"
    width="500px"
    class="d-flex justify-center"
  >
    <v-card>
      <v-card-text>任意弹窗内容</v-card-text>
      <v-card-actions>
        <v-btn @click="isModalShow = false">关闭</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
// 按你的实际文件路径引入子组件
import panelHeader from './panelHeader.vue'
export default {
  components: { panelHeader },
  data() {
    return {
      isModalShow: false
    }
  },
  methods: {
    showModal() {
      this.isModalShow = true
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者code-8