@@ -5,7 +5,7 @@ describe('Component scoped slot', () => {
5 5
const vm = new Vue({
6 6
template: `
7 7
<test ref="test">
8 -
<template scope="props">
8 +
<template slot-scope="props">
9 9
<span>{{ props.msg }}</span>
10 10
</template>
11 11
</test>
@@ -31,11 +31,39 @@ describe('Component scoped slot', () => {
31 31
}).then(done)
32 32
})
33 33 34 +
it('default slot (plain element)', done => {
35 +
const vm = new Vue({
36 +
template: `
37 +
<test ref="test">
38 +
<span slot-scope="props">{{ props.msg }}</span>
39 +
</test>
40 +
`,
41 +
components: {
42 +
test: {
43 +
data () {
44 +
return { msg: 'hello' }
45 +
},
46 +
template: `
47 +
<div>
48 +
<slot :msg="msg"></slot>
49 +
</div>
50 +
`
51 +
}
52 +
}
53 +
}).$mount()
54 + 55 +
expect(vm.$el.innerHTML).toBe('<span>hello</span>')
56 +
vm.$refs.test.msg = 'world'
57 +
waitForUpdate(() => {
58 +
expect(vm.$el.innerHTML).toBe('<span>world</span>')
59 +
}).then(done)
60 +
})
61 + 34 62
it('with v-bind', done => {
35 63
const vm = new Vue({
36 64
template: `
37 65
<test ref="test">
38 -
<template scope="props">
66 +
<template slot-scope="props">
39 67
<span>{{ props.msg }} {{ props.msg2 }} {{ props.msg3 }}</span>
40 68
</template>
41 69
</test>
@@ -65,11 +93,11 @@ describe('Component scoped slot', () => {
65 93
}).then(done)
66 94
})
67 95 68 -
it('template slot', done => {
96 +
it('named scoped slot', done => {
69 97
const vm = new Vue({
70 98
template: `
71 99
<test ref="test">
72 -
<template slot="item" scope="props">
100 +
<template slot="item" slot-scope="props">
73 101
<span>{{ props.foo }}</span><span>{{ props.bar }}</span>
74 102
</template>
75 103
</test>
@@ -95,6 +123,34 @@ describe('Component scoped slot', () => {
95 123
}).then(done)
96 124
})
97 125 126 +
it('named scoped slot (plain element)', done => {
127 +
const vm = new Vue({
128 +
template: `
129 +
<test ref="test">
130 +
<span slot="item" slot-scope="props">{{ props.foo }} {{ props.bar }}</span>
131 +
</test>
132 +
`,
133 +
components: {
134 +
test: {
135 +
data () {
136 +
return { foo: 'FOO', bar: 'BAR' }
137 +
},
138 +
template: `
139 +
<div>
140 +
<slot name="item" :foo="foo" :bar="bar"></slot>
141 +
</div>
142 +
`
143 +
}
144 +
}
145 +
}).$mount()
146 + 147 +
expect(vm.$el.innerHTML).toBe('<span>FOO BAR</span>')
148 +
vm.$refs.test.foo = 'BAZ'
149 +
waitForUpdate(() => {
150 +
expect(vm.$el.innerHTML).toBe('<span>BAZ BAR</span>')
151 +
}).then(done)
152 +
})
153 + 98 154
it('fallback content', () => {
99 155
const vm = new Vue({
100 156
template: `<test></test>`,
@@ -120,7 +176,7 @@ describe('Component scoped slot', () => {
120 176
const vm = new Vue({
121 177
template: `
122 178
<test ref="test">
123 -
<template slot="item" scope="props">
179 +
<template slot="item" slot-scope="props">
124 180
<span>{{ props.text }}</span>
125 181
</template>
126 182
</test>
@@ -158,7 +214,7 @@ describe('Component scoped slot', () => {
158 214
const vm = new Vue({
159 215
template: `
160 216
<test ref="test">
161 -
<template slot="item" scope="props">
217 +
<template slot="item" slot-scope="props">
162 218
<span>{{ props.text }}</span>
163 219
</template>
164 220
</test>
@@ -221,7 +277,7 @@ describe('Component scoped slot', () => {
221 277
const vm = new Vue({
222 278
template: `
223 279
<test ref="test">
224 -
<template slot="item" scope="props">
280 +
<template slot="item" slot-scope="props">
225 281
<span>{{ props.text || 'meh' }}</span>
226 282
</template>
227 283
</test>
@@ -246,7 +302,7 @@ describe('Component scoped slot', () => {
246 302
new Vue({
247 303
template: `
248 304
<test ref="test">
249 -
<template slot="item" scope="props">
305 +
<template slot="item" slot-scope="props">
250 306
<span>{{ props.text }}</span>
251 307
</template>
252 308
</test>
@@ -343,8 +399,8 @@ describe('Component scoped slot', () => {
343 399
},
344 400
template: `
345 401
<child>
346 -
<template :slot="a" scope="props">A {{ props.msg }}</template>
347 -
<template :slot="b" scope="props">B {{ props.msg }}</template>
402 +
<template :slot="a" slot-scope="props">A {{ props.msg }}</template>
403 +
<template :slot="b" slot-scope="props">B {{ props.msg }}</template>
348 404
</child>
349 405
`,
350 406
components: { Child }
@@ -389,10 +445,10 @@ describe('Component scoped slot', () => {
389 445
data: { names: ['foo', 'bar'] },
390 446
template: `
391 447
<test ref="test">
392 -
<template v-for="n in names" :slot="n" scope="props">
448 +
<template v-for="n in names" :slot="n" slot-scope="props">
393 449
<span>{{ props.msg }}</span>
394 450
</template>
395 -
<template slot="abc" scope="props">
451 +
<template slot="abc" slot-scope="props">
396 452
<span>{{ props.msg }}</span>
397 453
</template>
398 454
</test>
@@ -417,4 +473,34 @@ describe('Component scoped slot', () => {
417 473
expect(vm.$el.innerHTML).toBe('<span>world foo</span> <span>world bar</span> <span>world abc</span>')
418 474
}).then(done)
419 475
})
476 + 477 +
it('scoped slot with v-for (plain elements)', done => {
478 +
const vm = new Vue({
479 +
data: { names: ['foo', 'bar'] },
480 +
template: `
481 +
<test ref="test">
482 +
<span v-for="n in names" :slot="n" slot-scope="props">{{ props.msg }}</span>
483 +
<span slot="abc" slot-scope="props">{{ props.msg }}</span>
484 +
</test>
485 +
`,
486 +
components: {
487 +
test: {
488 +
data: () => ({ msg: 'hello' }),
489 +
template: `
490 +
<div>
491 +
<slot name="foo" :msg="msg + ' foo'"></slot>
492 +
<slot name="bar" :msg="msg + ' bar'"></slot>
493 +
<slot name="abc" :msg="msg + ' abc'"></slot>
494 +
</div>
495 +
`
496 +
}
497 +
}
498 +
}).$mount()
499 + 500 +
expect(vm.$el.innerHTML).toBe('<span>hello foo</span> <span>hello bar</span> <span>hello abc</span>')
501 +
vm.$refs.test.msg = 'world'
502 +
waitForUpdate(() => {
503 +
expect(vm.$el.innerHTML).toBe('<span>world foo</span> <span>world bar</span> <span>world abc</span>')
504 +
}).then(done)
505 +
})
420 506
})
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4