Vue--动态组件(component标签)的用法

绝地灬酷狼 2023-09-28 19:25 80阅读 0赞

原文网址：[Vue--动态组件(component标签)的用法\_IT利刃出鞘的博客-CSDN博客][Vue--_component_IT_-CSDN]

## 简介 ##

**说明**

本文介绍Vue的动态组件的用法。

在Vue中，可以通过component标签的is属性动态指定标签，例如：

此时，componentName的值是什么，就会引入什么组件。

**官网网址**

[https://v2.cn.vuejs.org/v2/guide/components.html\#动态组件][https_v2.cn.vuejs.org_v2_guide_components.html]

## 示例 ##

### 路由设置 ###

router/index.js

import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Parent from '../components/Parent'
    
    Vue.use(VueRouter)
    
    const routes = [
      {
        path: '/',
        name: 'Parent',
        component: Parent
      }
    ]
    
    const router = new VueRouter({
      routes
    })
    
    export default router

### 父组件 ###

components/Parent.vue

<template>
      <div class="outer">
        <h2>这是父组件</h2>
        <component :is="componentName" :propA="propAValue"></component>
      </div>
    </template>
    
    <script>
    import ChildA from './ChildA'
    import ChildB from './ChildB'
    
    export default {
      name: 'Parent',
      components: { ChildA, ChildB },
      data () {
        return {
          componentName: 'ChildB',
          propAValue: 'aaa'
        }
      }
    }
    </script>
    
    <style scoped>
    .outer {
      margin: 20px;
      border: 2px solid red;
      padding: 20px;
    }
    </style>

### 子组件 ###

components/ChildA.vue

<template>
      <div class="outer">
        <h3>这是ChildA</h3>
        <div>传入进来的propA值为：{
       {propA}}</div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'ChildA',
      props: ['propA']
    }
    </script>
    
    <style scoped>
    .outer {
      margin: 20px;
      border: 2px solid blue;
      padding: 20px;
    }
    </style>

components/ChildA.vue

<template>
      <div class="outer">
        <h3>这是ChildB</h3>
        <div>传入进来的propA值为：{
       {propA}}</div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'ChildB',
      props: ['propA']
    }
    </script>
    
    <style scoped>
    .outer {
      margin: 20px;
      border: 2px solid blue;
      padding: 20px;
    }
    </style>

### 测试 ###

访问：[http://localhost:8080/][http_localhost_8080]

![636f8853c313438aa8823ad0448ee97c.png][]

[Vue--_component_IT_-CSDN]: https://knife.blog.csdn.net/article/details/126255761
[https_v2.cn.vuejs.org_v2_guide_components.html]: https://v2.cn.vuejs.org/v2/guide/components.html#%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6
[http_localhost_8080]: http://localhost:8080/
[636f8853c313438aa8823ad0448ee97c.png]: https://img-blog.csdnimg.cn/636f8853c313438aa8823ad0448ee97c.png