vue2.0 全局组件和局部组件
来源：互联网 发布：wan微型端口 编辑：程序博客网 时间：2024/04/29 10:04
全局组件主要是component放外面，全局使用。局部组件主要是放Vue实例对象里，只能这个Vue元素内使用。
组件通过extend创建。
注意：exntend组件内的data是方法、方法、方法
全局创建组件全局调用：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="demo"> <aaa></aaa> </div> <script src="//cdn.bootcss.com/vue/2.1.10/vue.js"></script> <script> // 创建组件 var A=Vue.extend({ template:"<h3 @click='change'>{{msg}}</h3>", data:function(){ return { msg:"i am btn" } }, methods:{ change:function(){ this.msg="i am not a btn" } } }) // 全局调用组件 Vue.component('aaa',A); new Vue({ el:"#demo" }) </script></body></html>或省略extend：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> </style></head><body> <div id="demo"> <aaa></aaa> </div> <script src="//cdn.bootcss.com/vue/2.1.10/vue.js"></script> <script> // 全局组件 Vue.component('aaa',{ template:"<h3 @click='change'>{{msg}}</h3>", data:function(){ return { msg:"i am btn" } }, methods:{ change:function(){ this.msg="i am not a btn" } } }); new Vue({ el:"#demo" }) </script></body></html>全局创建组件局部调用：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="demo"> <aaa></aaa> </div><script src="//cdn.bootcss.com/vue/2.1.10/vue.js"></script> <script> // 创建组件 var A=Vue.extend({ template:"<h3 @click='change'>{{msg}}</h3>", data:function(){ return { msg:"i am btn" } }, methods:{ change:function(){ this.msg="i am not a btn" } } }) new Vue({ el:"#demo", components:{ // 局部调用组件 aaa:A } }) </script></body></html>或省略extend：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> </style></head><body> <div id="demo"> <aaa></aaa> </div> <script src="//cdn.bootcss.com/vue/2.1.10/vue.js"></script> <script> new Vue({ el:"#demo", components:{ // 局部组件 aaa:{ template:"<h3 @click='change'>{{msg}}</h3>", data:function(){ return { msg:"i am btn" } }, methods:{ change:function(){ this.msg="i am not a btn" } } } } }) </script></body></html>最后再来个动态组件。。。：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> </style></head><body> <div id="demo"> <button @click="a='aaa'">aaa</button> <button @click="a='bbb'">bbb</button> <component :is="a"> </component> </div> <script src="//cdn.bootcss.com/vue/2.1.10/vue.js"></script> <script> new Vue({ el:"#demo", data:{ a:'aaa' }, components:{ 'aaa':{ template:"<h3>我是aaa</h3>" }, 'bbb':{ template:"<h3>我是bbb</h3>" } } }) </script></body></html>2.0以后其实使用extend很少了，基本不用！
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <template id="aaa"> <div> <h3>abc</h3> <h4>def</h4> <h5>xyz</h5> </div> </template> <div id="box"> <aaa></aaa> {{msg}} </div> <script src="//cdn.bootcss.com/vue/2.2.1/vue.common.js"></script> <script> var Home={ template:'#aaa' } Vue.component('my-aaa',Home); window.onload=function(){ new Vue({ el:"#box", data:{ msg:"welcome vue2.0" }, components:{ 'aaa':Home } }) } </script></body></html>
0 0
- vue2.0 全局组件和局部组件
- vue 全局组件和局部组件
- vue 全局/局部组件
- vue全局组件和局部组件（一）
- vue全局组件和局部组件（二）
- Vue.js的组件（一）全局组件和局部组件
- vue2.0 组件
- vue2.0翻页组件
- VUE2.0组件库
- Vue2.0组件问题
- vue2.0 组件通信
- Vue2.0 组件通信
- Vue2 组件
- 对于vue中的全局组件和局部组件的一点小见解
- Vue.js的全局/局部组件填坑记
- Vue2.0组件之间通信
- vue2.0——组件
- vue2.0中的组件通信
- spring中的@Qualifier注解
- Metasploit信息收集2
- c++(2)
- Eclipse中project Explorer栏中java类报错不显示红叉怎么回事
- c++ char/int cin获取转换不匹配问题，
- vue2.0 全局组件和局部组件
- CentOS下SVN服务器的安装与配置
- 链表操作C语言版
- Python-下楼问题
- 2016级ACM寒假训练（七）
- Python数据加载、存储与文件格式
- C语言程序设计现代方法---第六章：循环
- 单例模式
- Oracle12C--此专栏的SQL所需要的建表语句(一)
