Question

我想在ajax调用运行时显示一些代理文本。此外，通话结束后，我想隐藏文字。因此，我编写了两个组件，其中一个是AppBody，它将在其插槽中保留一个用于模拟ajax调用的按钮。另一个是DownloadBtn，其中execute方法将执行ajax调用。在ajax调用之前和之后，我更改了一个名为loaderStatus的变量的值，并观察该变量的更改。每当变量更改时，它都会发出称为下载的自定义事件。从子组件DownloadBtn接收到事件后，AppBody组件在vue实例的doSomething方法内确认了此事件，另一个名为loadSpinner的变量被更改。我将此loadSpinner变量绑定到AppBody道具，因此，只要此loadSpinner更改，文本值就应相应地显示/隐藏。但是问题是文本出现了，但是没有按预期隐藏。但是，如果我删除了道具，那么控制台日志会返回预期的输出，但是我没有文本，因为文本取决于该道具的值。任何帮助将不胜感激。小提琴链接：jsfiddle

我有一个这样的js代码段：

Vue.component("app-body", {
    template : 
  `
   <div> 
      <div v-if="loader">
         <p>Please Wait Ajax Call is Running</p>
      </div>
      <div v-else>
         <slot></slot>
      </div>
   </div>
  `,
  data () {
    return {}
  },
  props : {
    loader : Boolean,
  }
});

Vue.component("download-btn", {
    template : `
    <div >
        <button type="button"  @click="execute"> Download </button>
    </div>
  `,
  data () {
    return {
        loaderStatus : false,
    }
  },
  props : {

  },
  methods : {
    execute () {
        //ajax call
        this.loaderStatus = true;
        console.log("Starting ajax call");

        fetch("https://jsonplaceholder.typicode.com/users")
        .then(res=>{
            console.log(res);
            this.loaderStatus = false;
            console.log("ajax call completed")
            /* this.$emit("download", true); */
        }).catch(err=>console.log(err));
    }
  },
  watch : {
    loaderStatus() {
        console.log("in watch::loaderStatus=>"+ this.loaderStatus);
        this.$emit("download", this.loaderStatus);
    }
  } 
});


new Vue({
  el: "#app",
  data: {
   loadSpinner : false
  },
  methods: {
    doSomething(newLoadSpinnerValue) {
        console.log("in doSomething::newLoadSpinnerValue=>" + newLoadSpinnerValue);
        this.loadSpinner = newLoadSpinnerValue;
    }
  },

})

和html部分是这样的：

<div id="app">


 <app-body :loader=loadSpinner>
     <download-btn @download="doSomething"></download-btn>
   </app-body>
</div>

Answer 1

问题在于您的slot仅在未进行装载时才装载。当加载开始时，slot被删除，这意味着加载器组件将被卸载，并且其中发生的任何事情都将不会运行任何观察程序或事件。永远不会报告该值，也永远不会重新激活该插槽。

如果要在按钮内进行下载，则需要以不同的方式处理下载按钮的隐藏。

请参见fiddle，该子项在加载时未删除子级，属性正常工作。

观察者的Vue自定义事件处理

1 个答案: