一 组建的注册
1.全局注册
1 <div id="app"> 2 <wdb></wdb> 3 </div> 4 <hr> 5 <div id="app1"> 6 <wdb></wdb> 7 <wdb></wdb> 8 </div> 9 <script> 10 Vue.component(‘wdb‘,{ 11 template:`<div><h1>这是wdb的地盘</h1></div>>`, 12 }); 13 const app=new Vue({ 14 el:‘#app‘, 15 }); 16 const app2=new Vue({ 17 el:‘#app1‘, 18 }) 19 </script>
2.局部注册 实例化的vue对象中注册
1 <div id="app"> 2 <my_component></my_component> 3 </div> 4 <script> 5 var Child={ 6 template:`<div><h1>{{name}}</h1></div>`, 7 data:function () { ******data必须是函数(方法) 8 return { 9 name:‘wdb‘, 10 } 11 } 12 }; 13 const app=new Vue({ 14 el:‘#app‘, 15 components:{ 16 ‘my_component‘:Child, 17 } 18 }) 19 </script>
3.子组件的注册
1 <div id="app"> 2 <father></father> 3 </div> 4 <script> 5 let child = { 6 template: `<div><h2>这是子组件</h2></div>`, 7 }; 8 let father = { 9 template: `<div> 10 <h1>这是父组件</h1> 11 <child></child> 12 </div>`, 13 components: { 14 child: child 15 } 16 }; 17 18 const app = new Vue({ 19 el: "#app", 20 components: { 21 father: father 22 } 23 }) 24 </script>
二 组件之间的通信
1.父子通信
1 <div id="app"> 2 <father></father> 3 </div> 4 <script> 5 let child={ 6 template:`<div> 7 <h2>这是子组件</h2> 8 <p>父亲给了我{{money}}美元</p> 9 </div>`, 10 props:[‘money‘] 11 }; 12 let father={ 13 template:`<div> 14 <h1>这是父组件</h1> 15 <child :money="num"></child> 16 </div> 17 `, 18 data:function () { 19 return { 20 num:100, 21 } 22 }, 23 components:{ 24 child:child, 25 } 26 }; 27 const app=new Vue({ 28 el:‘#app‘, 29 components: {father:father,} 30 }) 31 </script>
2.子父通信
1 <div id="app"> 2 <father></father> 3 </div> 4 <script> 5 let child={ 6 template:`<div> 7 <h2>这是子组件</h2> 8 <button @click="my_click">点我发送信息</button> 9 </div>`, 10 methods:{ 11 my_click:function () { 12 this.$emit(‘son_say‘,‘爸,你要当爷爷了‘); 13 } 14 } 15 }; 16 let father={ 17 template: `<div> 18 <h1>这是父组件</h1> 19 <!--// 接收这个事件--> 20 <child @son_say="my_son_say"></child> 21 <p>老婆~~你儿子说~~{{msg}}</p> 22 </div>`, 23 components: { 24 child: child 25 }, 26 data(){ 27 return{ 28 msg:‘‘ 29 } 30 }, 31 methods: { 32 my_son_say:function (data) { 33 this.msg=data; 34 } 35 } 36 }; 37 const app=new Vue({ 38 el:‘#app‘, 39 components:{ 40 father:father, 41 } 42 }) 43 </script>
3.非父子通信
1 <div id="app"> 2 <wdb class="wdb"></wdb> 3 <zhwl class="zh"></zhwl> 4 </div> 5 <script> 6 let middle_tool=new Vue(); 7 let wdb={ 8 template:`<div> 9 <h1>这是王同学</h1> 10 <button @click="w_click">点我给张同学发送信息</button> 11 </div>`, 12 methods:{ 13 w_click:function () { 14 middle_tool.$emit(‘houhou‘,‘花大姐记得买票‘) 15 } 16 } 17 }; 18 let zhwl={ 19 template: `<div> 20 <h1>这是张同学</h1> 21 <P>王同学对我说{{say}}</P> 22 </div>`, 23 data(){ 24 return{ 25 say:‘‘, 26 } 27 }, 28 mounted(){ 29 let that=this; 30 middle_tool.$on(‘houhou‘,function (data) { 31 that.say=data; 32 }) 33 } 34 }; 35 const app=new Vue({ 36 el:‘#app‘, 37 components:{ 38 zhwl:zhwl, 39 wdb:wdb, 40 } 41 }) 42 </script>
三 混合 重复功能和数据的储存器
1 <div id="app"> 2 <com_1></com_1> 3 <com_2></com_2> 4 </div> 5 <script> 6 let base = { 7 data(){ 8 return{ 9 is_show: false 10 } 11 }, 12 methods: { 13 show: function () { 14 this.is_show = true 15 }, 16 hide: function () { 17 this.is_show = false 18 } 19 } 20 }; 21 let com_1 = { 22 template: `<div> 23 <h1 v-show="is_show">这是第一个组件</h1> 24 <button @click="show">点我显示</button> 25 <button @click="hide">点我隐藏</button> 26 </div>`, 27 data(){ 28 return{ 29 is_show: true 30 } 31 }, 32 mixins: [base] 33 }; 34 let com_2 = { 35 template: `<div> 36 <h1 v-show="is_show">这是第二个组件</h1> 37 <button @mouseenter="show" @mouseleave="hide">鼠标移入显示移出隐藏</button> 38 </div>`, 39 minxins: [base] 40 }; 41 42 const app = new Vue({ 43 el: "#app", 44 components: { 45 com_1: com_1, 46 com_2: com_2 47 } 48 }) 49 </script>
四 插槽 插槽是一套内容分发的API,在组件中,<slot>作为内容承载分发的出口
1 <div id="app"> 2 <com> 3 <div slot="title">python</div> 4 <div slot="article">很贵 很难学 常人勿扰</div> 5 </com> 6 <com> 7 <div slot="title">linux</div> 8 <div slot="article">每天对着黑屏发呆吧</div> 9 </com> 10 </div> 11 <script> 12 let com = { 13 template: `<div> 14 <h1>路飞学城</h1> 15 <slot name="title"></slot> 16 <slot name="article"></slot> 17 </div>`, 18 }; 19 const app = new Vue({ 20 el: "#app", 21 components: { 22 com: com 23 } 24 }) 25 </script>
原文地址:https://www.cnblogs.com/wdbgqq/p/9842647.html
时间: 2024-11-02 14:14:18