Skip to content

Commit 17a1f12

Browse files
liuyunzhugeliuyunzhuge
committed
demo and bug fix
1 parent 8140d50 commit 17a1f12

File tree

8 files changed

+260
-81
lines changed

8 files changed

+260
-81
lines changed

‎demo/01.html

+120-32
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,144 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">
67
<meta http-equiv="X-UA-Compatible" content="ie=edge">
78
<title>Document</title>
89
<script src="../node_modules/vue/dist/vue.js"></script>
910
<script src="../dist/index.umd.js"></script>
11+
<style type="text/css">
12+
ul,
13+
li {
14+
list-style: none;
15+
margin: 0;
16+
padding: 0;
17+
}
18+
19+
.fix:after {
20+
content: '';
21+
display: block;
22+
clear: both;
23+
}
24+
25+
.tabs li {
26+
display: block;
27+
float: left;
28+
}
29+
30+
.tabs li a {
31+
display: block;
32+
line-height: 1;
33+
font-size: 14px;
34+
padding: 10px 20px;
35+
text-decoration: none;
36+
color: #07C160;
37+
position: relative;
38+
}
39+
40+
.tabs li.active a:after {
41+
content: '';
42+
position: absolute;
43+
bottom: 0;
44+
height: 2px;
45+
background-color: #07c160;
46+
left: 0;
47+
width: 100%;
48+
}
49+
50+
.fade-enter-active,
51+
.fade-leave-active {
52+
transition: opacity .3s;
53+
position: absolute;
54+
}
55+
56+
.fade-enter,
57+
.fade-leave-to {
58+
opacity: 0;
59+
}
60+
</style>
1061
</head>
62+
1163
<body>
1264
<div id="app">
13-
<keep-alive></keep-alive>
65+
<ul class="tabs fix">
66+
<li :class="{active: current==='component-a'}"><a href="#" @click.prevent="current='component-a'">A</a></li>
67+
<li :class="{active: current==='component-b'}"><a href="#" @click.prevent="current='component-b'">B</a></li>
68+
<li :class="{active: current==='component-c'}"><a href="#" @click.prevent="current='component-c'">C</a></li>
69+
<li :class="{active: current==='component-d'}"><a href="#" @click.prevent="current='component-d'">D</a></li>
70+
<li :class="{active: current==='component-e'}"><a href="#" @click.prevent="current='component-e'">E</a></li>
71+
</ul>
72+
<transition name="fade">
73+
<keep-alive max="4">
74+
<component :is="current"></component>
75+
</keep-alive>
76+
</transition>
1477
</div>
1578

1679
<script>
17-
Vue.use(VueEventBus, {
18-
log: true
19-
})
20-
21-
let app = new Vue({
22-
el: '#app'
23-
})
24-
25-
app.$eventBus.$on('a.n1.n2.n3', (data)=>{
26-
console.log('n1n2n3', data)
27-
})
80+
Vue.use(VueEventBus)
2881

29-
app.$eventBus.$on('a.n1.n2', (data)=>{
30-
console.log('n1n2', data)
31-
})
82+
function ExampleComponent({ name, once = false, button = false }) {
83+
return Vue.extend({
84+
template: `
85+
<div>
86+
<h2>Page ${name}, nickname: {{nickname}}</h2>
87+
${button ? "<div><button type=\"button\" @click=\"$eventBus.$off('nickname')\">Cancel</button></div>" : ''}
88+
</div>
89+
`,
90+
data() {
91+
return {
92+
nickname: 'liuyunzhuge'
93+
}
94+
},
95+
created() {
96+
this.$eventBus[once ? '$once' : '$on']('nickname', (nickname) => {
97+
console.log(`Page ${name} received nickname change message`)
98+
this.nickname = nickname
99+
})
100+
}
101+
})
102+
}
32103

33-
app.$eventBus.$on('a.n2.n3', (data)=>{
34-
console.log('n2n3', data)
35-
})
104+
let ComponentA = new ExampleComponent({ name: 'A' })
105+
let ComponentB = new ExampleComponent({ name: 'B', button: true })
106+
let ComponentC = new ExampleComponent({ name: 'C', once: true })
107+
let ComponentD = new ExampleComponent({ name: 'D' })
36108

37-
app.$eventBus.$on('b.n1.n2', (data)=>{
38-
console.log('n1n2', data)
109+
let ComponentE = Vue.extend({
110+
template: `
111+
<div>
112+
<input type="text" v-model="nickname"/>
113+
<button type="button" @click="update">Update</button>
114+
</div>
115+
`,
116+
data() {
117+
return {
118+
nickname: 'liuyunzhuge'
119+
}
120+
},
121+
methods: {
122+
update() {
123+
this.$eventBus.$emit('nickname', this.nickname)
124+
}
125+
}
39126
})
40127

41-
app.$eventBus.$on('b.n2.n3', (data)=>{
42-
console.log('n2n3', data)
128+
let app = new Vue({
129+
el: '#app',
130+
components: {
131+
ComponentA,
132+
ComponentB,
133+
ComponentC,
134+
ComponentD,
135+
ComponentE
136+
},
137+
data: {
138+
current: 'component-a'
139+
}
43140
})
44-
45-
app.$eventBus.$emit('a', 'aaa')
46-
app.$eventBus.$emit('b', 'bbb')
47-
48-
console.log('==============')
49-
50-
app.$eventBus.$off('b')
51-
app.$eventBus.$emit('a', 'aaa')
52-
app.$eventBus.$emit('b', 'bbb')
53-
54141
</script>
55142
</body>
143+
56144
</html>

‎demo/02.html

+130-39
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,155 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">
67
<meta http-equiv="X-UA-Compatible" content="ie=edge">
78
<title>Document</title>
89
<script src="../node_modules/vue/dist/vue.js"></script>
910
<script src="../dist/index.umd.js"></script>
11+
<style type="text/css">
12+
ul,
13+
li {
14+
list-style: none;
15+
margin: 0;
16+
padding: 0;
17+
}
18+
19+
.fix:after {
20+
content: '';
21+
display: block;
22+
clear: both;
23+
}
24+
25+
.tabs li {
26+
display: block;
27+
float: left;
28+
}
29+
30+
.tabs li a {
31+
display: block;
32+
line-height: 1;
33+
font-size: 14px;
34+
padding: 10px 20px;
35+
text-decoration: none;
36+
color: #07C160;
37+
position: relative;
38+
}
39+
40+
.tabs li.active a:after {
41+
content: '';
42+
position: absolute;
43+
bottom: 0;
44+
height: 2px;
45+
background-color: #07c160;
46+
left: 0;
47+
width: 100%;
48+
}
49+
50+
.fade-enter-active,
51+
.fade-leave-active {
52+
transition: opacity .3s;
53+
position: absolute;
54+
}
55+
56+
.fade-enter,
57+
.fade-leave-to {
58+
opacity: 0;
59+
}
60+
</style>
1061
</head>
62+
1163
<body>
1264
<div id="app">
13-
<keep-alive></keep-alive>
65+
<ul class="tabs fix">
66+
<li :class="{active: current==='component-a'}"><a href="#" @click.prevent="current='component-a'">A</a></li>
67+
<li :class="{active: current==='component-b'}"><a href="#" @click.prevent="current='component-b'">B</a></li>
68+
<li :class="{active: current==='component-c'}"><a href="#" @click.prevent="current='component-c'">C</a></li>
69+
<li :class="{active: current==='component-d'}"><a href="#" @click.prevent="current='component-d'">D</a></li>
70+
<li :class="{active: current==='component-e'}"><a href="#" @click.prevent="current='component-e'">E</a></li>
71+
</ul>
72+
<transition name="fade">
73+
<keep-alive max="4">
74+
<component :is="current"></component>
75+
</keep-alive>
76+
</transition>
1477
</div>
1578

1679
<script>
17-
Vue.use(VueEventBus, {
18-
log: true
19-
})
20-
21-
let app = new Vue({
22-
el: '#app'
23-
})
24-
80+
Vue.use(VueEventBus)
2581
let EventBusManager = Vue.prototype.$eventBus.noConflict()
2682

27-
EventBusManager(app).$on('a.n1.n2.n3', (data)=>{
28-
console.log('n1n2n3', data)
29-
})
30-
31-
EventBusManager(app).$on('a.n1.n2', (data)=>{
32-
console.log('n1n2', data)
33-
})
83+
function ExampleComponent({ name, once = false, button = false }) {
84+
return Vue.extend({
85+
template: `
86+
<div>
87+
<h2>Page ${name}, nickname: {{nickname}}</h2>
88+
${button ? "<div><button type=\"button\" @click=\"$eventBus.$off('nickname')\">Cancel</button></div>" : ''}
89+
</div>
90+
`,
91+
data() {
92+
return {
93+
nickname: 'liuyunzhuge'
94+
}
95+
},
96+
computed: {
97+
$eventBus() {
98+
return EventBusManager(this)
99+
}
100+
},
101+
created() {
102+
this.$eventBus[once ? '$once' : '$on']('nickname', (nickname) => {
103+
console.log(`Page ${name} received nickname change message`)
104+
this.nickname = nickname
105+
})
106+
}
107+
})
108+
}
34109

35-
EventBusManager(app).$on('a.n2.n3', (data)=>{
36-
console.log('n2n3', data)
37-
})
110+
let ComponentA = new ExampleComponent({ name: 'A' })
111+
let ComponentB = new ExampleComponent({ name: 'B', button: true })
112+
let ComponentC = new ExampleComponent({ name: 'C', once: true })
113+
let ComponentD = new ExampleComponent({ name: 'D' })
38114

39-
EventBusManager(app).$on('b.n1.n2', (data)=>{
40-
console.log('n1n2', data)
115+
let ComponentE = Vue.extend({
116+
template: `
117+
<div>
118+
<input type="text" v-model="nickname"/>
119+
<button type="button" @click="update">Update</button>
120+
</div>
121+
`,
122+
data() {
123+
return {
124+
nickname: 'liuyunzhuge'
125+
}
126+
},
127+
computed: {
128+
$eventBus() {
129+
return EventBusManager(this)
130+
}
131+
},
132+
methods: {
133+
update() {
134+
this.$eventBus.$emit('nickname', this.nickname)
135+
}
136+
}
41137
})
42138

43-
EventBusManager(app).$on('b.n2.n3', (data)=>{
44-
console.log('n2n3', data)
139+
let app = new Vue({
140+
el: '#app',
141+
components: {
142+
ComponentA,
143+
ComponentB,
144+
ComponentC,
145+
ComponentD,
146+
ComponentE
147+
},
148+
data: {
149+
current: 'component-a'
150+
}
45151
})
46-
47-
EventBusManager(app).$emit('a', 'aaa')
48-
EventBusManager(app).$emit('b', 'bbb')
49-
50-
console.log('==============')
51-
52-
EventBusManager(app).$off('b')
53-
EventBusManager(app).$emit('a', 'aaa')
54-
EventBusManager(app).$emit('b', 'bbb')
55-
56-
console.log('==============')
57-
58-
EventBusManager(app).$off()
59-
EventBusManager(app).$emit('a', 'aaa')
60-
EventBusManager(app).$emit('b', 'bbb')
61-
62152
</script>
63153
</body>
154+
64155
</html>

‎dist/index.cjs.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -467,7 +467,7 @@ function normalizeEvents$1(namespace, events) {
467467
}
468468

469469
return events.map(function (e) {
470-
return e + namespace;
470+
return e === namespace ? e : e + namespace;
471471
});
472472
}
473473

@@ -522,7 +522,7 @@ var index = {
522522

523523
instance && instance.$on('hook:beforeDestroy', function () {
524524
print('log', "hook:beforeDestroy:clean all listeners on current instance");
525-
proxy.$off('');
525+
proxy.$off(namespace);
526526
});
527527
return proxy;
528528
}

0 commit comments

Comments
 (0)