Vue组件相关

Posted 2021-01-14 wdbgqq

 一  组建的注册

　　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>

View Code

三 混合     重复功能和数据的储存器

 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>