vue动态组件

作者: 嗯哼_3395 | 来源:发表于2018-07-07 15:54 被阅读0次

<!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>