<template> <div> <login @clickFun="returnFun" :type ="type"></login> <h1>{{ msg }}</h1> <h3>用户信息为：{{token}}</h3> <h3>登录地点：{{loginname}}</h3> <button @click="login">登陆</button> <button @click="logout">登出</button> </div> </template> <script> import Cookies from 'js-cookie' import login from '@/pages/login' export default { name: 'home', data () { return { msg: '系统二:父组件页面', token:'未登陆', loginname:'未登陆', type:'getdata', } }, mounted(){ }, methods: { login(){ this.type = "login"; }, logout(){ this.type = "logout"; }, returnFun(value){ console.log(value,"子组件返回值") const token = value.token; this.token = token?token:'未登陆'; const loginname = value.loginname; this.loginname = loginname?loginname:'未登陆'; } }, components:{ login } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
到这里，一个简易单点登录系统的搭建已经完成，大家可以照着这个思路，继续完善最终制作成对应的控件。如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
到此这篇关于Vue单点登录控件代码分享 的文章就介绍到这了,更多相关Vue单点登录内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章: