一 组建的注册
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-08-30 09:34:40