Javascript 从另一个组件重新渲染组件的一部分

调用confirm方法时，我想从ConfirmCode组件刷新Header.vue

我想在用户使用axios ajax登录时刷新header组件的li元素

Appointment.vue：

<send-sms-modal@clickClose="setShowModal"
   @clickSend="hideModal"
   @clickConfirm="showStep=true"
   :step="true"
   :showRegister="showRegister"></send-sms-modal>

SendSMSModal.vue：

<confirm-code :mobile="mobileClone"
:user_id="userId" @clickConfirm="clickConfirm" 
:step="step"></confirm-code>
<script>
clickConfirm() {
     this.$emit('clickConfirm');
}
</script>

单击确认（）{
这是。$emit（'clickConfirm'）；
}

ConfirmCode.vue：

<button @click="confirm">
      Confirm
</button>
<script>
confirm() {
  axios.post('/api/confirm_code', {
      confirm_code: this.code,
      user_id: this.user_id}).then(function (response) {
        if (response.data.status == true) {
         window.localStorage.setItem('user', response.data.user);
            this.$emit('clickConfirm');
         }}.bind(this)).catch(function (error) {
          this.errors = error.response.data.errors;
       }.bind(this));
}
</script>

证实
确认{
axios.post（“/api/confirm_code”{
确认代码：此.code，
user\u id:this.user\u id}）。然后（函数（响应）{
if（response.data.status==true）{
window.localStorage.setItem（'user'，response.data.user）；
这是。$emit（'clickConfirm'）；
}}.bind（this））.catch（函数（错误）{
this.errors=error.response.data.errors；
}.约束（这个）；
}

Header.vue：

<li>
      <a v-if="user" href="">
             User profile
      </a>
      <a v-else @click="setShowModal"
        href="javascript:void(0)" class="">
         <span>
              Login
        </span>
     </a>
</li>
<script>
mounted() {
   this.user = window.localStorage.getItem('user');
 }
</script>

安装的（）{
this.user=window.localStorage.getItem（'user'）；
}

我建议您看看

使用vuex，您可以创建一个存储，在其中保存用户信息。 然后可以全局访问和设置用户

store.js

从“Vue”导入Vue；
从“Vuex”导入Vuex；
Vue.use（Vuex）；
常量状态={
用户：window.localStorage.getItem（“用户”）
};
常数突变={
设置用户（状态、用户）{
state.user=用户；
window.localStorage.setItem（“用户”，user）；
}
};
常量动作={
SetUser（{commit}，user）{
提交（“设置用户”，用户）；
}
};
常量getters={
用户（州）{
返回state.user；
}
};
导出默认的新Vuex.Store({
国家,，
突变，
行动，
吸气剂
});

然后像这样使用商店：

你好{{user}}
设置用户
从“vuex”导入{MapGetter，mapActions}；
导出默认值{
名称：“应用程序”，
方法：{
…映射操作（[“设置用户”]）
},
计算：{
…映射获取程序（[“用户”]）
}
};

您还需要这样注册您的店铺：

从“Vue”导入Vue；
从“/App”导入应用程序；
从“/store”导入存储；
新Vue({
el:“应用程序”，
商店，
组件：{App}，
模板：“
您能解释一下通过强制header.vue重新呈现试图实现的目标吗？@VarunAgarwal我想重新呈现我在这里写的header中的li元素。因为用户变量已更改，所以应该在不刷新整个页面的情况下更新它