代码之家 › 专栏 › 技术社区 › BostonMacOSX

当我通过子函数更改变量时,为什么我的父组件不更新视图

vuejs3 vue.js

0

BostonMacOSX · 技术社区 · 2 年前

问题

当我点击子级中的按钮时,我会在父级中运行函数,变量会从true翻转到false,但主LoginView中的组件不会旋转。。。它总是卡在TheLogin组件上。。。从不切换到TheRegister。控制台日志显示变量正在按预期更改值。。

家长

<script setup lang="ts">
import TheLogin from '../components/TheLogin.vue'
import TheRegister from '../components/TheRegister.vue'

var login = true;
var register = false;

const dotoggle = (thevalue) => {
    console.log(login);
    console.log(register);
    login = login ? false : true;
    register = register ? false : true;
    login = false;
}
</script>

<template>
  <main>
    <TheLogin v-if="login" @togglereg="dotoggle" />
    <TheRegister v-if="register" />
  </main>
</template>

孩子

<script setup lang="ts">


const emits = defineEmits(["togglereg"])

</script>

<template>
  <div class="carorbitalhead">CARORBITAL</div>
    <div><input class="inputmain" type="text" placeholder="username" /></div>
    <div><input class="inputmain" type="password" placeholder="password" /></div>
    <div><button class="buttonmain">SIGN IN</button></div>
    <div><button @click.prevent="$emit('togglereg','4')" class="buttonmain">REGISTER</button></div>
    <div>-- OR --</div>
    <div>SOCIAL LOGINS</div>
</template>

2 回复 | 直到 2 年前

1

0

Alexander Nenashev 2 年前

您的变量不是被动的,因此父组件中的模板不会更新,请使用refs:

<script setup lang="ts">

import {ref} from 'vue';

import TheLogin from '../components/TheLogin.vue'
import TheRegister from '../components/TheRegister.vue'

var login = ref(true);
var register = ref(false);

const dotoggle = () => {
    register.value = true;
    login.value = false;
}
</script>

2

0

Shiva Kumar Sahoo 2 年前

我认为父组件的切换函数和子组件的值中的逻辑存在问题。

父组件根据登录和注册变量的值在两个子组件(TheLogin和TheRegister)之间切换。

现在,父级的dotoggle函数被简化,可以正确地在登录变量和注册变量之间切换。

父组件:

<script setup lang="ts">
import TheLogin from '../components/TheLogin.vue'
import TheRegister from '../components/TheRegister.vue'

var login = true;
var register = false;

const dotoggle = () => {
  login = !login;
  register = !register;
};
</script>

<template>
  <main>
    <TheLogin v-if="login" @togglereg="dotoggle" />
    <TheRegister v-if="register" />
  </main>
</template>

子组件:

<script setup lang="ts">
const emits = defineEmits(["togglereg"]);
</script>

<template>
  <div class="carorbitalhead">CARORBITAL</div>
  <div><input class="inputmain" type="text" placeholder="username" /></div>
  <div><input class="inputmain" type="password" placeholder="password" /></div>
  <div><button class="buttonmain">SIGN IN</button></div>
  <div><button @click.prevent="$emit('togglereg')" class="buttonmain">REGISTER</button></div>
  <div>-- OR --</div>
  <div>SOCIAL LOGINS</div>
</template>

希望它能帮助你:)