概述
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="libs/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- 绑定父组件的属性值，切换多个子组件 -->
<component :is="compo" :change-val="change"></component>
</div>
<template id="login">
<div>
<h4>登录</h4>
<label>用户名:<input type="text" /></label><br />
<label>密码:<input type="password" /></label><br />
<button>登 录</button>
<button @click="goRegister">注 册</button>
<button @click="goReset">忘 记 密 码</button>
</div>
</template>
<template id="register">
<div>
<h4>注册</h4>
<label>用户名:<input type="text" /></label><br />
<label>密码:<input type="password" /></label><br />
<label>确认密码:<input type="password" /></label><br />
<button @click="goLogin">注 册</button>
</div>
</template>
<template id="reset">
<div>
<h4>重置密码</h4>
<label>密码:<input type="password" /></label><br />
<label>确认密码:<input type="password" /></label><br />
<button @click="goLogin">确 定</button>
</div>
</template>
<script>
// 登录组件
const loginEle = Vue.component('login', {
name: 'Login',
template: '#login',
props: ['changeVal'],
methods: {
// 跳转注册组件
goRegister: function() {
this.changeVal(2);
},
// 跳转重置密码组件
goReset: function() {
this.changeVal(3);
}
}
})
// 注册组件
const registerEle = Vue.component('register', {
name: 'Register',
template: '#register',
props: ['changeVal'],
methods: {
// 跳转登录组件
goLogin: function() {
this.changeVal(1);
}
}
})
// 重置密码组件
const resetEle = Vue.component('reset', {
name: 'Reset',
template: '#reset',
props: ['changeVal'],
methods: {
// 跳转登录组件
goLogin: function() {
this.changeVal(1);
}
}
})
const app = new Vue({
el: '#app',
data: {
val: 1,
compo: 'loginE'
},
methods: {
change: function(v) {
// 接收子组件传过来的参数:[1,2,3] 切换对应的组件
console.log('父组件接收到跳转val:', this.val);
this.val = v;
switch (this.val) {
case 1:
this.compo = 'loginE';
break;
case 2:
this.compo = 'registerE';
break;
case 3:
this.compo = 'resetE';
break;
default:
console.log('子组件参数不符合规范')
break;
}
}
},
components: {
loginE: loginEle,
registerE: registerEle,
resetE: resetEle
}
})
</script>
</body>
</html>
最后
以上就是要减肥花瓣为你收集整理的Vue多组件切换的全部内容，希望文章能够帮你解决Vue多组件切换所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复