Skip to content

Commit 802d928

Browse files
单个插槽,具名插槽
1 parent 7f5d95e commit 802d928

File tree

2 files changed

+8
-2
lines changed

2 files changed

+8
-2
lines changed

Vue-Component/README.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -367,7 +367,7 @@ var validation = new Vue({
367367

368368
### 组件的自定义事件
369369

370-
`prop` 是父传子,子船父通过`$emit()`
370+
`prop` 是父传子,子传父通过`$emit()`
371371

372372
```html
373373
<div id="emit">
@@ -486,7 +486,7 @@ var nameSlot = new Vue({
486486

487487
```html
488488
<div>
489-
<!--<slot name="slotname"></slot> = <p slot="slotname">具名插槽</h1>-->
489+
<!--<slot name="slotname"></slot> = <p slot="slotname">具名插槽</p>-->
490490
<p>具名插槽</p>
491491
<h1>Tom</h1>
492492
<!-- 其它没有 slot 属性的子元素将全部分发到 <slot></slot> 标签 -->
@@ -496,3 +496,5 @@ var nameSlot = new Vue({
496496
```
497497

498498
### 作用域插槽
499+
500+
作用域插槽是一种特殊类型的插槽,用作一个 (能被传递数据的) 可重用模板,来代替已经渲染好的元素。在子组件中,只需将数据传递到插槽,就像你将 prop 传递给组件一样:

Vue-Component/index.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,8 @@ <h1>php</h1>
8282
<p slot="slotname">具名插槽</p>
8383
</child>
8484
</div>
85+
86+
<!-- slot插槽 - 作用域插槽 -->
8587
</body>
8688
</html>
8789
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
@@ -313,4 +315,6 @@ <h1>Tom</h1>
313315
},
314316
},
315317
});
318+
319+
// slot插槽 - 作用域插槽
316320
</script>

0 commit comments

Comments
 (0)