fix

Author: zepang

docs/posts/tutorial/5.md

@@ -1,2 +1,36 @@
 # 无渲染组件 
 
+再看无渲染组件之前，我们来下看下面的两个组件：
+
+##### 组件一
+
+<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="result" data-user="uncleze2017" data-slug-hash="EBgryO" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="input-tag-list">
+  <span>See the Pen <a href="https://codepen.io/uncleze2017/pen/EBgryO/">
+  input-tag-list</a> by uncleze (<a href="https://codepen.io/uncleze2017">@uncleze2017</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+
+一个功能非常简单的输入标签的输入框组件。
+
+在输入框输入内容，当用户按下`Enter`键，自动添加标签，点击标签右侧`x`删除当前标签。
+
+##### 组件二
+
+<iframe height="265" style="width: 100%;" scrolling="no" title="input-tag" src="//codepen.io/uncleze2017/embed/xNQrZo/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
+  See the Pen <a href='https://codepen.io/uncleze2017/pen/xNQrZo/'>input-tag</a> by uncleze
+  (<a href='https://codepen.io/uncleze2017'>@uncleze2017</a>) on <a href='https://codepen.io'>CodePen</a>.
+</iframe>
+
+针对上述的情况我们思考一下如果将这两个组件进行封装给一类组件：
+
+* 功能基本一致
+* UI有差距
+
+也就是说需要将UI设置成动态的。这个时候就需要用到`slot`(内容分发)。
+
+## slot
+
+关于作用域插槽，我在之前的内容中有提到，Vue中的slot源于Web Components规范草案，也被称之为插槽。你可以认为插槽就是一个占位空壳子，插槽显示的内容由子组件自身决定，slot写在组件template的哪块，父组件传过来的模板将来就显示在哪块。
+
+