vue component动态组件

森林迷Le鹿

已于 2023-02-24 11:47:28 修改

阅读量742

点赞数

文章标签： vue

于 2020-09-18 10:44:20 首次发布

本文链接：https://blog.csdn.net/weixin_45821809/article/details/108660685

版权

动态组件

通过component标签的is属性来进行组件的切换

is的属性值决定要显示的组件，所以将is的属性值设置为data中的值，以便于动态变化

<template>
  <div class="app">
      <component :is="组件名称">
  
      </component>
  </div>
</template>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>动态组件</title>
  <script src="bower_components/vue/dist/vue.js"></script>
  <style>
  </style>
</head>
<body>
  <div id="box">
    <input type="button" @click="a='aaa'" value="aaa组件">
    <input type="button" @click="a='bbb'" value="bbb组件">
    <component :is="a"></component> <!-- 动态组件-->
  </div>
 
  <script>
    var vm=new Vue({
      el:'#box',
      data:{
        a:'aaa'
      },
      components:{
        'aaa':{
          template:'<h2>我是aaa组件</h2>'
        },
        'bbb':{
          template:'<h2>我是bbb组件</h2>'
        }
      }
    });
 
  </script>
</body>
</html>

关注博主即可阅读全文