当前阅读教程:Vue.JS入门教程 > 组件-全局组件 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: Vue.js 组件 Component | 下一篇: 组件-局部组件 |
所有实例都能用全局组件。 示例注册简单的全局组件,并使用它 代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>组件-全局组件</title> <!--加载本地vue.js的框架--> <script src="vue2.2.2.min.js"></script> </head> <body> <!--定义div区块的id的值,这里定义的值为"app",后面vue会使用该值--> <div id="app"> <p>你好</p> <aaa></aaa> <bbb></bbb> </div> <script> //注册新的主键,组件名:aaa Vue.component('aaa', { template:'<h1>自定义全局组件</h1>' } ) var neirong = Vue.extend({ template:'<div>自定义全局组件,使用Vue.extend</div>' }) //注册新的主键,组件名:bbb Vue.component("bbb",neirong) //创建实例 new Vue({ el:"#app" //app为前面div区块的id的值,通过"#"号绑定 }) </script> </body> </html> 效果图 |
|
上一篇: Vue.js 组件 Component | 下一篇: 组件-局部组件 |