vue动态组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="box">
        <button @click="name=name=='len'?'veb':'len'">切换</button>
        <!--没加keep-alive的时候veb会出发多次-->
        <keep-alive>
             <componnet :is="name"></componnet>
        </keep-alive>
    </div>
</body>
    <script>
       Vue.component("veb",{
           created:function(){
                console.log("a")
           },
           template:"<h1>hello</h1>"
       })
       Vue.component("len",{
           template:"<h1>world</h1>"
       })
       var box=new Vue({
          el:"#box",
          data:{
              name:"veb"
          }
       })

    </script>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 我在Vue动态组件上的坑上重复踩了两次,一模一样的两次思考过程。 我想,这个重复思考的过程并不是偶然,说明是很有必...
    嘉宝_Appian阅读 24,999评论 6 19
  • 本文写给对Vue组件了解的基础上,如果你不明白什么是Vue的组件,可以去官网看看Vue组件基础。在Vue中有一个 ...
    刘圣凯阅读 12,648评论 0 6
  • vue与jquery相比,最大的变化就是大大减少了节点的操作,组件化更是好用到不行。往日都是用jquery做tab...
    Cherry9507阅读 7,272评论 4 3
  • 21323232323232323
    小熊前端阅读 3,339评论 1 6
  • 我决定要写一个故事。 一个所有人都听过, 却从未有人写过的故事; 一个所有人都梦过, 却从未遇到过的故事。 取个名...
    胡之策阅读 289评论 2 3