一、前言
动态组件:点击按钮切换页面(组件)。
动态组件的使用在vue.js文档中也有介绍,虽然不是特别的详细,但是新手的话还是建议先看看,点击查看。其中目录二~五是通过引入页面来达到切换的效果的,六之后的目录则是通过路由来改变页面切换的
二、项目效果
切换点击登录方式,如:使用账户/手机/二维码登录,然后点击来回切换登录的页面。
三、目录结构
在根页面 login/index.js中写页面的公共部分。如登录的标题和切换组件的按钮(在这里,因为form表单不知道怎么提取,所以是写在页面里的)。所以这里的根页面只做了切换的逻辑处理。
四、具体代码(方法一:不同页面传参)
注:
方法一:在具体的点击事件里监听一个方法并传参。
方法二:在具体点击事件的父元素上绑定值变化时触发的事件,然后在具体事件上给予一个用来区分的值。
在 …login/index.vue 中:
<template>
<div
class="login-container"
:style="backgroundStyle"
>
//这里写入动态组件
<component v-bind:is="currentTabComponent"></component>
</div>
</template>
<script>
// 引入登录页面的组件
import userlogin from "./userlogin/index.vue";
import phonelogin from "./phonelogin/index.vue";
import codelogin from "./codelogin/index.vue";
export default {
name: "Login",
// 这里别漏啦 尤其是新手要注意
components: {
userlogin,
phonelogin,
codelogin
},
data () {
return {
//这里定义一个默认显示的页面
currentTabComponent: "userlogin",
backgroundStyle: '',
};
},
created () {
this.setBackgroundStyle()
},
methods: {
//登录的页面会传入一个参数,这里记得接收
changeWays (parmas) {
//传入参数的赋值到currentTabComponent中,然后进行判断,显示哪个页面
this.currentTabComponent = parmas
if (this.currentTabComponent === "userlogin") {
this.currentTabComponent = "userlogin";
} else if (this.currentTabComponent === "phonelogin") {
this.currentTabComponent = "phonelogin";
} else {
this.currentTabComponent = "codelogin";
}
},
async setBackgroundStyle () {
const indexBannerInfo = await getIndexBanner()
this.backgroundStyle = 'background:url(' + process.env.VUE_APP_BASE_API + '/i2dsp/emg/file/' + indexBannerInfo.data.adImageName + ') center no-repeat;'
}
},
};
</script>
在 …login/phonelogin/index.vue 中:
<template>
<el-form
ref="phoneForm"
:rules="Rules"
:model="phoneForm"
class="login-form"
label-position="left"
>
//....手机号码和验证码等表框和登录按钮,非本文重点,且内容过多就不写了
<el-divider class="login-divider">其他方式登录</el-divider>
<div style="margin-bottom:34px;">
// 此处是重点
// 此处定义点击的‘按钮图标’,要给每个图标定义一个参数
<span @click="changeWays('userlogin')"> //传的参数名要和根页面那边的参数名(判断那块)一样
<svg-icon icon-class="user-circle" />
</span>
<span @click="changeWays('phonelogin')">
<svg-icon icon-class="ic-r-mobile" />
</span>
<span @click="changeWays('codelogin')">
<svg-icon icon-class="code-icon" />
</span>
</div>
</el-form>
</template>
<script>
import { phoneValidate } from "@/utils/validate";
export default {
name: "phonelogin",
data () {
// ...
}
methods: {
// 把参数传到根页面中
changeWays (parmas) {
this.$parent.changeWays(parmas)
}
}
}
</script>
然后其他页面也和phonelogin一样
五、具体代码(方法二:同一页面传参)
<template>
<div>
// 切换按钮
<el-radio-group @change="changeComponent">
<el-radio-button label="1">
<svg-icon icon-class="card"></svg-icon> 卡片显示
</el-radio-button>
<el-radio-button label="2">
<svg-icon icon-class="table"></svg-icon> 列表显示
</el-radio-button>
</el-radio-group>
// 动态组件及组件传参
<component v-bind:is="currentDevComponent"></component>
</div>
</template>
<script>
//这里记得引入要显示的文件
import DevTable from "./devtable/index";
import DevCard from "./devcard/index";
export default {
name: "DevInfo",
//引入文件后 这里要说明一下
components: {
DevTable,
DevCard,
},
data(){
return{
//默认显示此组件
currentDevComponent: "dev-card",
}
},
methods:{
//改变子组件
changeComponent(val) {
switch (val) {
case "1":
this.currentDevComponent = "dev-card";
this.size = 8;
break;
case "2":
this.currentDevComponent = "dev-table";
this.size = 10;
break;
}
}
}
}
</script>
六、通过路由来切换页面
官方文档添加链接描述
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>