Vue/nuxt - 如何从子组件访问父级引用

我有一个全局确认模式组件，已在我的默认布局文件中注册， 然后，我会尝试从 page/index.vue 访问它，但调用 this.$refs 只会返回一个空对象。将模式组件放在我的pages/index.vue 中会起作用，但它会破坏我的全局确认模式的目的。

布局/default.vue

<template lang="pug">
v-app(v-if="show")
  v-main
    transition
      nuxt
  confirm(ref='confirm')
</template>
<script>
import confirm from '~/components/confirm.vue'
export default {
  components: { confirm },
  data: () => ({
    show: false
  }),
  async created() {
    const isAuth = await this.$store.dispatch("checkAuth")
    if (!isAuth) return this.$router.push("/login")
    this.show = true
  }
}
</script>

组件/confirm.vue

<template>
  <v-dialog v-model="dialog" :max-width="options.width" @keydown.esc="cancel">
    <v-card>
      <v-toolbar dark :color="options.color" dense flat>
        <v-toolbar-title class="white--text">{{ title }}</v-toolbar-title>
      </v-toolbar>
      <v-card-text v-show="!!message">{{ message }}</v-card-text>
      <v-card-actions class="pt-0">
        <v-spacer></v-spacer>
        <v-btn color="primary darken-1" @click.native="agree">Yes</v-btn>
        <v-btn color="grey" @click.native="cancel">Cancel</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>
<script>
  export default {
    data: () => ({
      dialog: false,
      resolve: null,
      reject: null,
      message: null,
      title: null,
      options: {
        color: 'primary',
        width: 290
      }
    }),
    methods: {
      open(title, message, options) {
        this.dialog = true
        this.title = title
        this.message = message
        this.options = Object.assign(this.options, options)
        return new Promise((resolve, reject) => {
          this.resolve = resolve
          this.reject = reject
        })
      },
      agree() {
        this.resolve(true)
        this.dialog = false
      },
      cancel() {
        this.resolve(false)
        this.dialog = false
      }
    }
  }
</script>

然后我想从我的pages/index.vue 中调用它（如果引用在这里，它会起作用，但我想要一个全局确认模式）

methods: {
    async openConfirm() {
      console.log("openConfirm")
       if (await this.$refs.confirm.open('Delete', 'Are you sure?', { color: 'red' })) {
         console.log('--yes')
       }else{
         console.log('--no')
       }
    },

简短的回答是：不要那样滥用 $ref 。最终，它只会导致反模式包裹着反模式。

与您要完成的确切任务相关的更详细的答案： 我现在已经在几个 Vue 项目中解决了同样的问题（全局的、基于承诺的确认对话框），到目前为止，这是非常有效的：

1. 将确认对话框设置为其自己的独立“模块”，以便您可以使用两行将其添加到 main.js 中：

import ConfirmModule from './modules/confirm';
Vue.use(ConfirmModule);

（旁白：还有其他一些“全局模块化组件”，例如警报等......）

2. 使用 JS 文件来编排设置过程、promise 管理和组件实例化。例如：

import vuetify from '@/plugins/vuetify';
import confirmDialog from './confirm-dialog.vue';

export default {
  install(Vue) {
    const $confirm = (title, text, options) => {
      const promise = new Promise((resolve, reject) => {
        try {
          let dlg = true;
          const props = {
            title, text, options, dlg,
          };
          const on = { };
          const comp = new Vue({
            vuetify,
            render: (h) => h(confirmDialog, { props, on }),
          });
          on.confirmed = (val) => {
            dlg = false;
            resolve(val);
            window.setTimeout(() => comp.$destroy(), 100);
          };

          comp.$mount();
          document.getElementById('app').appendChild(comp.$el);
        } catch (err) {
          reject(err);
        }
      });
      return promise;
    };

    Vue.prototype.$confirm = $confirm;
  },
};

3. 将其安装到 Vue.prototype，这样您只需调用以下命令即可从应用程序中的任何组件使用它：this.$confirm(...)

4. 当您构建 Vue 组件（confirm-dialog.vue）时，您只需要单向绑定标题、文本和选项的 props，将 dlg prop 单向绑定到对话框，或者通过使用 getter 和 setter 计算属性...无论哪种方式...

5. 发出一个“已确认”事件true如果用户确认。因此，从confirm-dialog.vue组件中：this.$emit('confirmed', true);

6. 如果他们关闭对话框，或者单击“否”，则发出 false，这样承诺就不会一直存在：this.$emit('confirmed', false);

7. 现在，您可以从任何组件中使用它，如下所示：

methods: {
  confirmTheThing() {
    this.$confirm('Do the thing', 'Are you really sure?', { color: 'red' })
      .then(confirmed => {
        if (confirmed) {
          console.log('Well OK then!');
        } else {
          console.log('Eh, maybe next time...');
        }
      });
  }
}