实现动态组件的方式

一、<component :is="放置组件名"></component>（常用）

我们可以定义一个数据并将该数据作为 component 元素的 is 属性值，这个数据保存了组件的名称，当我们需要切换组件时，只需要改变数据所保存的内容即可。

使用 keep-alive 组件与动态组件结合，可以实现在同一挂载点切换显示不同的组件，并且保持组件的状态。比如说第一个组件做了加法，页面展示了新计算出来的数值，使用 keep-alive 可以使得切换到其他组件后再切回来数值保持不变。

如果想在刷新页面后保持组件不变的话，那就得把数据和组件名这些存起来了。

示例代码如下：

<template>
  <div class="container">
    <!-- 使用属性绑定指令将指定的数据绑定到属性中 -->
    <keep-alive>
      <component v-bind:is="show"></component>
    </keep-alive>
    <button @click="transfer()">Transfer</button>
  </div>
</template>

<script>
// 导入组件
import First from "./dynamicCom/firstAssembly.vue";
import Last from "./dynamicCom/lastAssembly.vue";

export default {
  // 定义数据
  data() {
    return {
      show: "First",
    };
  },
  // 注册组件
  components: {
    First,
    Last,
  },
  // 定义事件处理函数
  methods: {
    transfer() {
      if (this.show === "First") {
        this.show = "Last";
      } else {
        this.show = "First";
      }
    },
  },
};
</script>

<style>
</style>

二、 使用<router-view></router-view>（也常用）

 首先要配置路由

// router.js  
import Vue from 'vue';  
import Router from 'vue-router';  
import ComponentA from './components/ComponentA.vue';  
import ComponentB from './components/ComponentB.vue';  
  
Vue.use(Router);  
  
export default new Router({  
  routes: [  
    {  
      path: '/component-a',  
      name: 'ComponentA',  
      component: ComponentA  
    },  
    {  
      path: '/component-b',  
      name: 'ComponentB',  
      component: ComponentB  
    }  
    // 可以添加更多的路由配置  
  ]  
});

在上面的配置中，我们定义了两个路由，分别对应 ComponentA 和 ComponentB 这两个组件。当访问 /component-a 路径时，ComponentA会被渲染；当访问/component-b路径时，ComponentB会被渲染。 

其次在入口文件引入并使用这个路由配置

// main.js  
import Vue from 'vue';  
import App from './App.vue';  
import router from './router'; // 引入路由配置  
  
new Vue({  
  router, // 将路由配置注入到Vue实例中  
  render: h => h(App)  
}).$mount('#app');

最后试试在根组件 App.vue 中使用 <router-view> 来显示当前路由对应的组件

<!-- App.vue -->  
<template>  
  <div id="app">  
    // 这里用的是声明式路由，在js中换成编程式路由也是一样的效果
    <router-link to="/component-a">Go to Component A</router-link>  
    <router-link to="/component-b">Go to Component B</router-link>  
    <router-view></router-view> <!-- 这里会根据当前路由显示对应的组件 -->  
  </div>  
</template>

在上面的模板中，<router-link>用于创建导航链接，to属性指定了链接的目标路由。<router-view>是一个占位符，它会根据当前的路由动态地渲染对应的组件。

当用户点击“Go to Component A”链接时，URL会变为/component-a，并且ComponentA会被渲染到<router-view>的位置。同样地，点击“Go to Component B”链接会切换到ComponentB。

原文地址：https://blog.csdn.net/Niucode/article/details/137952336

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！