在Vue js中未触发Created

Question

我正在使用 Vue Js 实现一个应用程序，并且我有以下代码：

<template>
    <simple-page title="list-patient" folder="Patient" page="List Patient" :loading="loading">
        <list-patients @patientsLoaded="onPatientsLoaded"/>
    </simple-page>
</template>

简单页面和列表患者都是我创建的自定义组件。在 ListPatients 中，我对 Create 回调有一个 HTTP 请求，如下所示：

created() {
        axios.get("...").then(response => {
            ...
            this.$emit('patientsLoaded');
        })
 },

然后，我的目标是处理患者加载事件并更新顶部父组件上的加载道具，如下所示：

data() {
        return {
            loading: true
        }
    },   
methods: {
        onPatientsLoaded(params) {
            this.loading = false;
        }
    }

但是，创建的方法不会在 list-患者组件内触发。我可以完成这项工作的唯一方法是删除 :loading。 有谁可以帮忙吗？

编辑1 简单页面代码：

<template>
<section :id="id">
    <!-- Breadcrumb-->
    <breadcumb :page="page" :folder="folder"/>
    <!-- Breadcrumb-->
    <!-- Simple Card-->
    <simple-card :title="page" :icon="icon" :loading="loading" v-slot:body>
        <slot>

        </slot>
    </simple-card>
    <!-- Simple Card-->
</section>
</template>

简易卡代码：

<b-card>
    <!-- Page body-->
    <slot name="body" v-if="!loading">

    </slot>
    <!--Is loading-->
    <div class="loading-container text-center d-block">
        <div v-if="loading" class="spinner sm spinner-primary"></div>
    </div>
</b-card>

Answer 1

您的列表患者组件进入名称为“body”的插槽中。该插槽有一个 v-if 指令，因此基本上它不会被渲染，并且钩子也无法访问。也许将 v-if 更改为 v-show 会在某种程度上帮助您解决这种情况。不管怎样，你有很深的嵌套槽，这会让事情变得混乱。我通常在组件内部声明加载变量，其中将呈现获取数据。 例如：

data () {
  return {
    loading: true;
  };
},
mounted() {
  axios.get('url')
    .then(res => {
      this.loading = false;
    })
}

并在您的模板中：

<div v-if="!loading">
  <p>{{fetchedData}}</p>
</div>
<loading-spinner v-else></loading-spinner>

idk 也许这不是最佳实践解决方案

Answer 2

1. v-slot

   命名槽只能在

   template

   标签中指示
2. 我想您希望将传递的默认插槽作为

   body

   插槽放置到

   simple-card

   组件中？如果是这样，您应该不在

   simple-card

   本身中指示 v 槽，而是在您传递给它的内容中指示。

<simple-card :title="page" :icon="icon" :loading="loading">
  <template v-slot:body>
    <slot>
    </slot>
  </template>
</simple-card>

Answer 3

启用 vue 3 选项 API：

chainWebpack: config => {
    
    config.plugin('feature-flags').tap(args => {
      args[0].__VUE_OPTIONS_API__ = JSON.stringify(true);
      args[0].__VUE_PROD_DEVTOOLS__ = JSON.stringify(false);
      args[0].__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = JSON.stringify(false);
      return args
    })