<template>
<ul class="nav-list">
<li v-if="username=== ''" @click="logClick">登录</li>
</ul>
<my-dialog :is-show="isShowLogDialog" >
<log-form @has-log="onSuccessLog"></log-form>
</my-dialog>
</template>
<script>
import LogForm from './logForm'
export default {
components: {
LogForm
},
data () {
return {
isShowLogDialog: false,
username: ''
}
},
methods:{
// 子组件用户名密码登录成功后把用户名显示在注册上，把data的数值传入username中
onSuccessLog (data) {
console.log(data)
this.closeDialog ('isShowLogDialog')
this.username = data.username
}
}
}
//子组件LogForm
<template>
<div class="g-form-line">
<div class="g-form-btn">
<a class="button" @click="onLogin">登录</a>
</div>
</div>
</template>
<script>
methods: {
onLogin () {
if (!this.userErrors.status || !this.passwordErrors.status) {
this.errorText = '部分选项未通过'
}
else {
this.errorText = ''
this.$http.get('api/login')
.then((res) => {
// 通过子传父的方式把res.data的数据传给has-log
this.$emit('has-log', res.data)
}, (error) => {
console.log(error)
})
}
}
}
</script>