vue动态组件的使用

一、前言

动态组件：点击按钮切换页面(组件)。

动态组件的使用在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>