完成无渲染函数的文档

Author: zepang

docs/.vuepress/config.js

@@ -20,8 +20,8 @@ module.exports = {
           "/posts/tutorial/2",
           "/posts/tutorial/3",
           "/posts/tutorial/4",
-          "/posts/tutorial/5",
           "/posts/tutorial/6",
+          "/posts/tutorial/5",
           "/posts/tutorial/7",
           "/posts/tutorial/8",
           "/posts/tutorial/9",

docs/posts/tutorial/5.md

@@ -95,7 +95,7 @@ slot分为3种类型，第一种是普通插槽，也就是我们上边提到这
 
 上边案例中，close-icon这个关闭按钮的事件函数是绑定在close这个元素上边，而且是在组件内部绑定的。刚才我们实现了close-icon的替换，假如UI这边需要调整close-icon的位置，最快的方法是改样式，改样式首先需要考虑这个组件大概那些地方会用到，是全局改样式还是只是改局部的，如果不是使用第三方组件的情况下，也就是咱们从开发一个组件的方面考虑，适应常用场景下保证组件灵活性，避免使用者使用的时候需要对组件内部进行修改。所以我们这里使用slot-scope来对上边的案例进行一个修改。
 
-<iframe height="265" style="width: 100%;" scrolling="no" title="message-box-2" src="//codepen.io/uncleze2017/embed/ewWZGv/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
+<iframe height="400" style="width: 100%;" scrolling="no" title="message-box-2" src="//codepen.io/uncleze2017/embed/ewWZGv/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
   See the Pen <a href='https://codepen.io/uncleze2017/pen/ewWZGv/'>message-box-2</a> by uncleze
   (<a href='https://codepen.io/uncleze2017'>@uncleze2017</a>) on <a href='https://codepen.io'>CodePen</a>.
 </iframe>
@@ -125,9 +125,107 @@ slot分为3种类型，第一种是普通插槽，也就是我们上边提到这
 ```
 将close这个方法用slot-scope传递到了父组件，让使用这可以自定义元素并绑定事件函数，解决之前只能在内部固定绑定事件的情况。
 
-## 行为与表象分离
+## 无渲染组件
 
 我们通过slot和slot-scope给使用这提供部分自定义html和调用自己内部实现的函数的途径。让使用者自定义部分html，然后还能方便的调用函数，并且不用理会内部的状态。
 
-其实我们仔细想想，就上述的组件，其实完全可以让用户自定义全部的html，也就是组件不渲染html，只提供函数，和组件的状态。
+所谓的无渲染组件，就是让用户自定义全部的html，组件只提供函数，和组件的状态等剩余内容，即是不渲染html的组件。
+
+接下来我们使用最开始提到的案例。
+
+因为已经不需要渲染了html了， 所以template就不需要了，我们直接使用render函数来进行渲染
+
+```js
+ Vue.component('renderless-component', {
+  render (h) {
+    return this.$scopedSlots.default({
+      tags: this.tags,
+      addTag: this.addTag,
+      deleteTag: this.deleteTag
+    })
+  },
+   props: {
+     tags: Array
+   },
+   mounted () {
+     console.log(this.tags)
+   },
+   methods: {
+     addTag (e) {
+       let value = e.target.value.trim()
+       if (!this.tags.includes(value)) {
+         this.tags.push(value)
+        }
+       e.target.value = ''
+       this.$emit('on-change',value, this.tags)
+     },
+     delTag (index) {
+       this.tags.splice(index, 1)
+     }
+   }
+})
+
+let vue = new Vue({
+  el: '#app',
+  data () {
+    return  {
+      tags: [
+        '日本',
+        '泰国'
+      ]
+    }
+  },
+  methods: {
+    handleChangeTags (cur, tags) {
+      console.log(cur, tags)
+    }
+  }
+})
+```
+
+```html
+<div id="app">
+  <renderless-component :tags="tags">
+    <div class="input-tag" slot-scope="{tags, addTag, deleteTag}">
+      <span class="tag" v-for="(tag, i) in tags" :key="i">
+      {{tag}}
+      <a href="javascript:;" @click="delTag(i)">&times;</a>  
+    </span>
+    <input type="text" @keydown.enter="addTag">
+    </div>
+  </renderless-component>
+</div>
+```
+<iframe height="400" style="width: 100%;" scrolling="no" title="renderless-component" src="//codepen.io/uncleze2017/embed/Prmaev/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
+  See the Pen <a href='https://codepen.io/uncleze2017/pen/Prmaev/'>renderless-component</a> by uncleze
+  (<a href='https://codepen.io/uncleze2017'>@uncleze2017</a>) on <a href='https://codepen.io'>CodePen</a>.
+</iframe>
+
+然后，我们调整一下html部分，就可以适应第二种场景。
+
+```html
+<div id="app">
+  <renderless-component :tags="tags">
+    <div class="input-tag__wrapper" slot-scope="{tags, addTag, delTag}">
+    <div class="input-tag">
+      <input type="text" @keydown.enter="addTag">
+    </div>
+    <div class="tag-list" v-if="tags.length">
+      <span class="tag" v-for="(tag, i) in tags" :key="i">
+      {{tag}}
+      <a href="javascript:;" @click="delTag(i)">&times;</a>  
+    </span>
+  </div>
+   <div class="tag-list__empty" v-else>
+     Please add some tags ...
+  </div>
+  </div>
+  </renderless-component>
+</div>
+```
+
+<iframe height="300" style="width: 100%;" scrolling="no" title="renderless-component2" src="//codepen.io/uncleze2017/embed/zVwXXr/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
+  See the Pen <a href='https://codepen.io/uncleze2017/pen/zVwXXr/'>renderless-component2</a> by uncleze
+  (<a href='https://codepen.io/uncleze2017'>@uncleze2017</a>) on <a href='https://codepen.io'>CodePen</a>.
+</iframe>