vue组件 落日映苍穹つ 2022-04-23 15:38 305阅读 0赞 # 定义全局组件的三种方式 # 方式1,伪代码 <div id="app"> <-- 引用组件,是引号里的名词,不是实例对象--> <mycom1></mycom1> <-- 如果myCom1驼峰,引用组件如下 --> <my-com1></my-com1> </div> <script> //1.1 使用Vue.extend创建全局组件 var com1 = Vue.extend({ template:'<h3>创建的组件</h3>', //通过template属性,指定了组件要展示的html结构 }) //1.2 使用Vue.component('组件名',组件模板对象com1) Vue.component('mycom1',com1) //如果myCom1驼峰 </script> 两步合成一步 <div id="app"> <mycom1></mycom1> </div> <script> // Vue.component // 第一个参数,组件的名词,将来在模板标签引用就使用它 // 第二个参数,Vue.extend创建的组件,template属性就是展示的内容 Vue.component('mycom1', Vue.extend({ template:'<h3>创建的组件</h3>', }) ) </script> 方式2 <div> <mycom2></mycom2> </div> <script> Vue.component('mycom2',{ template:'<h3>这是直接用component创建出来的组件,更简化</h3>' }) //无论以何种方式创建的 template,最多只能有一个唯一根元素,不能并排,同级。 </script> 方式3 <-- 前两种template里写标签很麻烦,继续简化 --> <div> <mycom3></mycom3> </div> <-- 在VM绑定的#app外面,使用template元素,定义组件的HTML模板结构 --> <template id="tmp1"> <div> <h1>在这里写,会有代码提示和高亮o</h1> </div> </template> <script> Vue.component('mycom3',{ template:'#tmp1',//绑定一个组件模板的Id }) </script> # 定义私有组件components # 以上三种方法定义的都是全局组件 ,现在定义私有组件 <template id=tmp2> <h1>控制区域外,组件</h1> </template> <script> var vm2 = new Vue({ el:"#app2", components:{//定义实例内部私有组件的 login:{//组件名字 login //template:'<h1>这是私有的组件</h1>' template:'#temp2' } } }) </script> # 组件中的data # <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="lib/vue.js"></script> </head> <body> <div id="app"> <mycom1></mycom1> </div> <script type="text/javascript"> Vue.component('mycom1',{ template:'<h1>这是全局组件,这是组件中data的使用{ {msg}}</h1>', //data,必须是一个function,function必须返回一个对象 data:function(){ return { msg:111,//组件中的data,在template中使用 } } }) var vm = new Vue({ el:'#app', data:{}, methods:{}, }) </script> </body> </html> # 组件中的methods # 实现一个计数器 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="lib/vue.js"></script> </head> <body> <div id="app"> <counter></counter> <counter></counter> <counter></counter> </div> <template id="tmp1"> <div> <input type="button" value="+1" @click="increment"> <h3>{ {count}}</h3> </div> </template> <script type="text/javascript"> //var dataObj = {count:0} //外部定义一个对象 Vue.component('counter',{ template:'#tmp1', data:function(){ return {count:0} //这样就会互不影响了 //dataObj //return外部这个对象,但是多个counter 共享外部的数据 }, methods:{ increment(){ this.count ++ } } }) var vm = new Vue({ el:'#app', data:{}, methods:{}, }) </script> </body> </html> # 组件的切换 # 第一种方式 设置一个变量,flag 登录 v-if 注册 v-else 代码,缺陷只能两个切换 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="lib/vue.js"></script> </head> <body> <div id="app"> <a href="" @click.prevent="flag=true">登录</a> <a href="" @click.prevent="flag=false">注册</a> <login v-if="flag"></login> <register v-else="flag"></register> </div> <script type="text/javascript"> //var dataObj = {count:0} //外部定义一个对象 Vue.component('login',{ template:'<h3>假装登录</h3>', }) Vue.component('register',{ template:'<h3>假装注册</h3>', }) var vm = new Vue({ el:'#app', data:{ flag:true }, methods:{}, }) </script> </body> </html> # 组件的切换的第二种方式 # 使用vue的component,展示组件 <div> <component :is="'login'"></component> </div> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="lib/vue.js"></script> </head> <body> <div id="app"> <!-- a链接一定要组织默认行为,不然改变了后,会再次访问,相当于重新刷新 --> <a href="" @click.prevent="comName='login'">登录</a> <a href="" @click.prevent="comName='register'">注册</a> <component :is="comName"></component> </div> <script type="text/javascript"> Vue.component('login',{ template:'<h3>假装登录</h3>', }) Vue.component('register',{ template:'<h3>假装注册</h3>', }) var vm = new Vue({ el:'#app', data:{ comName:'login',//当前显示组件的名词 }, methods:{}, }) </script> </body> </html> 命名视图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="lib/vue.js"></script> <script src="lib/vue-router.js" ></script> </head> <body> <div id="app"> <router-view name="default"></router-view> <router-view name="left"></router-view> <router-view name="main"></router-view> </div> <script type="text/javascript"> var header = { template:'<h1 class="header">头部区域</h1>' } var leftbox = { template:'<h1 class="left">侧边栏</h1>' } var mainbox = { template:'<h1 class="main">主题区域</h1>' } var router = new VueRouter({ routes:[ //多个s <--component {path: '/',components:{ default:header, left:leftbox, main:mainbox }}, ] }) var vm =new Vue({ el:"#app", router }) </script> </body> </html>
还没有评论,来说两句吧...