vue19 组建 Vue.extend component、组件模版、动态组件的实例代码

2024-05-06 15:41:01

字体：大中小

来源：转载

供稿：网友

具体代码如下所示：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title>  <script src="bower_components/vue/dist/vue.js"></script>  <style>  </style></head><body>  <div id="box">  </div>  <script>    var Aaa=Vue.extend({//继承出来一个Vue类Aaa      template:'<h3>我是标题3</h3>'    });    var a=new Aaa();//a跟vm一样    console.log(a);    var vm=new Vue({      el:'#box',      data:{        bSign:true      }    });  </script></body></html>

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title>  <script src="bower_components/vue/dist/vue.js"></script>  <style>  </style></head><body>  <div id="box">    <aaa></aaa>  </div>  <script>    var Aaa=Vue.extend({      template:'<h3>我是标题3</h3>'    });    Vue.component('aaa',Aaa);//aaa是组建实例，全局组件    var vm=new Vue({      el:'#box',      data:{        bSign:true      }    });  </script></body></html>

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title>  <script src="bower_components/vue/dist/vue.js"></script>  <style>  </style></head><body>  <div id="box">    <aaa></aaa>  </div>  <script>    var Aaa=Vue.extend({      data(){        return {          msg:'我是标题^^'        };      },      template:'<h3>{{msg}}</h3>'    });    Vue.component('aaa',Aaa);    var vm=new Vue({      el:'#box',      data:{        bSign:true      }    });  </script></body></html>

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title>  <script src="bower_components/vue/dist/vue.js"></script>  <style>  </style></head><body>  <div id="box">    <aaa></aaa>  </div>  <script>    var Aaa=Vue.extend({      data(){        return {          msg:'我是标题^^'        };      },      methods:{        change(){          this.msg='changed'        }      },      template:'<h3 @click="change">{{msg}}</h3>'    });    Vue.component('aaa',Aaa);    var vm=new Vue({      el:'#box',      data:{        bSign:true      }    });  </script></body></html>

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title>  <script src="bower_components/vue/dist/vue.js"></script>  <style>  </style></head><body>  <div id="box">    <aaa></aaa>  </div>  <script>    var Aaa=Vue.extend({      template:'<h3>{{msg}}</h3>',      data(){// es6语法，函数不写：，组件里面放数据: data必须是函数的形式，函数必须返回一个对象(json)        return {          msg:'ddddd'        }      }    });    var vm=new Vue({      el:'#box',      data:{        bSign:true      },      components:{ //局部组件，放到某个组件内部，Vue.component('aaa',Aaa);        aaa:Aaa      }    });  </script></body></html>

上一篇：vue自定义指令directive的使用方法

下一篇：基于 jQuery 实现键盘事件监听控件