update(doc): create-api support $prop and $events

document/components/docs/en-US/create-api.md

@@ -15,11 +15,62 @@ __Notice:__ All componnets which used `createAPI` must be registered by `Vue.use
 
 - Usage:
 
-  - This method will add a method which is named `$create{camelize(Component.name)}` to Vue's prototype, so you can instantiate the Vue component by `const instance = this.$createAaBb(config, [renderFn, single])` in other components. The instantiated component's template content will be attached to `body` element.The parameters of the `$createAaBb`：
-    - `{Object} config` It will be passed to the component as its props except the events in `events`(It will transform by default, eg: If `events` has value `['click']`, then the prop `onClick` will be treated as component's event and not component's props).
-    - `{Function} [renderFn]` Optional, used to generate the VNode child node in the slot scene in general.
-    - `{Boolean} [single]` Optional, whether the instantiated component is a singleton or not. If two parameters are provided and the `renderFn`'s type is not function, then the `single` value is the sencond parameter's value.
-  - The return of the method `instance` is a instantiated Vue component，and the `remove` method will be **attached** to this instance.You can invoke the `remove` method to destroy the component and detach the component's content from `body` element. If the caller is destroyed and the `instance` will be destroyed too.
+  - This method will add a method which is named `$create{camelize(Component.name)}` to Vue's prototype, so you can instantiate the Vue component by `const instance = this.$createAaBb(config, [renderFn, single])` in other components. The instantiated component's template content will be attached to `body` element.
+
+  - `const instance = this.$createAaBb(config, renderFn, single)`
+
+    Parameters：
+
+    | Attribute | Description | Type | Accepted Values | Default |
+    | - | - | - | - | - |
+    | config | Config options | Object | {} | - |
+    | renderFn | Optional, used to generate the VNode child node in the slot scene in general | Function | - | function (createElement) {...} |
+    | single | Optional, whether the instantiated component is a singleton or not. If two parameters are provided and the `renderFn`'s type is not function, then the `single` value is the sencond parameter's value. | Boolean | single in createAPI() | - |
+
+    Config options `config`:
+
+    It will be passed to the component as its props except the events in `events`(It will transform by default, eg: If `events` has value `['click']`, then the prop `onClick` will be treated as component's event and not component's props).
+
+    After 1.8.0+, you can set `$props` and `$events` in `config`, `$props` supported reactive properties, these props will be watched.
+
+    | Attribute | Description | Type | Accepted Values | Default |
+    | - | - | - | - | - |
+    | $props | Component props | Object | - | {<br> title: 'title',<br> content: 'my content',<br> open: false<br>} |
+    | $events | Component event handlers | Object | - | {<br> click: 'clickHandler',<br> select: this.selectHandler<br>} |
+
+    `$props` example, `{ [key]: [propKey] }`:
+
+    ```js
+    {
+      title: 'title',
+      content: 'my content',
+      open: false
+    }
+    ```
+
+    `title`, `content` and `open` are keys of the component prop, and the prop' value will be taken by the following steps:
+
+    1. If `propKey` is not a string value, then use `propKey` as the prop value.
+    1. If `propKey` is a string value and the caller instance dont have the `propKey` property, then use `propKey` as the prop value.
+    1. If `propKey` is a string value and the caller instance have the `propKey` property, then use the caller's `propKey` property value as the prop value. And the prop value will be reactively.
+
+    `$events` example, `{ [eventName]: [eventValue] }`:
+
+    ```js
+    {
+      click: 'clickHandler',
+      select: this.selectHandler
+    }
+    ```
+
+    `click` and `select` are event names, and the event handlers will be taken by the following steps:
+
+    1. If `eventValue` is not a string value, then use `eventValue` as the event handler.
+    1. If `eventValue` is a string value, then use the caller's `eventValue` property value as the event handler.
+
+    The Returned value `instance`:
+
+    `instance` is a instantiated Vue component，and the `remove` method will be **attached** to this instance.You can invoke the `remove` method to destroy the component and detach the component's content from `body` element. If the caller is destroyed and the `instance` will be destroyed too.
 
 - Example:
 
@@ -119,7 +170,7 @@ __Notice:__ All componnets which used `createAPI` must be registered by `Vue.use
 
 ### How to use in general JS files or use it in global
 
-In vue component, you could call by `this.$createHello(config, renderFn)` because the `this` is just a vue instance. But in general JS files, you need to use `Hello.$create`. As shown below:
+In vue component, you could call by `this.$createHello(config, renderFn)` because the `this` is just a Vue instance. But in general JS files, you need to use `Hello.$create`. As shown below:
 
 ```js
 import Hello from './hello.vue'

document/components/docs/zh-CN/create-api.md

@@ -15,25 +15,76 @@ __注：__ 所有通过 `createAPI` 实现的通过 API 的形式调用的自定
 
 - 用法：
 
-  - 该方法在 Vue 的 prototype 上增加一个名为 `$create{camelize(Component.name)}` 的方法，这样就可以在其他组件中直接通过 `const instance = this.$createAaBb(config, [renderFn, single])` 这样来实例化组件了，而且这个实例化组件的元素是被附加到 `body` 元素下的；关于 `$createAaBb` 的参数：
-    - `{Object} config` 组件配置参数，默认所有的值都会当做 props 传给组件，但是要排除 `events` 中的事件（默认会做转换，例如：`events` 的值为 `['click']`，那么 `config` 中的 `onClick` 就是作为 `click` 事件的回调函数，而不是作为 props 传递给组件）。
-    - `{Function} [renderFn]` 可选参数，用于生成子 VNode 节点，一般场景是处理 slot。
-    - `{Boolean} [single]` 可选参数，创建的时候决定是否是单例的，优先级更高，如果没有传入 renderFn 的话，single 的值就是第二个参数的值。
-  - 注意调用后的返回值 `instance` 就是组件实例，这个实例会被**附加**或者**代理** `remove` 方法，如果调用了，该实例就会被销毁且会从 `body` 下移除。如果说实例化上下文（即 `this.$createXx` 中的 `this`）销毁的话会自动移除销毁该实例元素。
+  - 该方法在 Vue 的 prototype 上增加一个名为 `$create{camelize(Component.name)}` 的方法，这样就可以在其他组件中直接通过 `const instance = this.$createAaBb(config, [renderFn, single])` 这样来实例化组件了，而且这个实例化组件的元素是被附加到 `body` 元素下的。
+
+  - `const instance = this.$createAaBb(config, renderFn, single)`
+
+    参数：
+
+    | 参数 | 说明 | 类型 | 默认值 | 示例 |
+    | - | - | - | - | - |
+    | config | 配置参数，经处理后传给组件 | Object | {} | - |
+    | renderFn | 可选参数，用于生成子 VNode 节点，一般场景是处理 slot | Function | - | function (createElement) {...} |
+    | single | 可选参数，创建的时候决定是否是单例的，优先级更高，如果没有传入 renderFn 的话，single 的值就是第二个参数的值 | Boolean | createAPI() 中传入的 single | - |
+
+    配置参数 `config`：
+
+    默认所有的值都会当做 props，但是要排除 createAPI 传入的 `events` 中的事件（默认会做转换，例如：`events` 的值为 `['click']`，那么 `config` 中的 `onClick` 就是作为 `click` 事件的回调函数，而不是作为 props 传递给组件）。
+
+    1.8.0 版本后 `config` 中可以直接设置 `$props` 和 `$events`，`$props` 中的值是**响应式**的，自动监控当前实例化上下文（即 `this.$createXx` 中的 `this`）的上对应的属性值：
+
+    | 参数 | 说明 | 类型 | 默认值 | 示例 |
+    | - | - | - | - | - |
+    | $props | 传递给组件的 Props | Object | - | {<br> title: 'title',<br> content: 'my content',<br> open: false<br>} |
+    | $events | 组件的 Events 事件回调 | Object | - | {<br> click: 'clickHandler',<br> select: this.selectHandler<br>} |
+
+    `$props` 示例，约定结构 `{ [key]: [propKey] }`：
+
+    ```js
+    {
+      title: 'title',
+      content: 'my content',
+      open: false
+    }
+    ```
+
+    `title`、`content`、`open` 就是传递给组件的 Prop 的 key，而对应 Prop 的值则按照如下规则获取：
+
+    1. 如果是非字符串，则直接取配置的 `propKey` 作为值
+    1. 如果是字符串，且配置的 `propKey` 不在当前实例上下文属性上，则直接取 `propKey` 作为值
+    1. 是字符串，且在当前实例上下文属性上，那么直接获取当前实例上下文对应的 `propKey` 的值，且会监控这个值的变化实时更新到组件实例上
+
+    `$events` 示例，约定结构 `{ [eventName]: [eventValue] }`：
+
+    ```js
+    {
+      click: 'clickHandler',
+      select: this.selectHandler
+    }
+    ```
+
+    `click`、`select` 就是事件名，而对应的事件回调则按照如下规则获取：
+
+    1. 如果 `eventValue` 是非字符串，则直接取配置的 `eventValue` 作为值
+    1. 如果 `eventValue` 是字符串，则直接获取当前实例上下文对应的 `eventValue` 的值
+
+    返回值 `instance`：
+
+    `instance` 就是组件实例，这个实例会被**附加**或者**代理** `remove` 方法，如果调用了，该实例就会被销毁且会从 `body` 下移除。如果说实例化上下文（即 `this.$createXx` 中的 `this`）销毁的话会自动移除销毁该实例元素。
 
 - 示例：
 
-我们先编写一个 Hello.vue 组件：
+  我们先编写一个 Hello.vue 组件：
 
-```html
-<template>
+  ```html
+  <template>
     <div @click="clickHandler">
       {{content}}
       <slot name="other"></slot>
     </div>
-</template>
+  </template>
 
-<script type="text/ecmascript-6">
+  <script type="text/ecmascript-6">
     export default {
       name: 'hello',
       props: {
@@ -48,12 +99,12 @@ __注：__ 所有通过 `createAPI` 实现的通过 API 的形式调用的自定
         }
       }
     }
-</script>
-```
+  </script>
+  ```
 
-然后我们再通过 `createAPI` 把 Hello.vue 变成一个 API 式调用的组件并调用。
+  然后我们再通过 `createAPI` 把 Hello.vue 变成一个 API 式调用的组件并调用。
 
-```js
+  ```js
     import Vue from 'vue'
     import Hello from './Hello.vue'
 
@@ -117,13 +168,13 @@ __注：__ 所有通过 `createAPI` 实现的通过 API 的形式调用的自定
         }
       }
     })
-```
+  ```
 
-示例中就是创建了一个需要 API 调用的组件 `Hello`，然后在其他组件中去使用，重点就是 `showHello()` 方法做的事情：调用 `this.$createHello(config, renderFn)` 实现组件的实例化。
+  示例中就是创建了一个需要 API 调用的组件 `Hello`，然后在其他组件中去使用，重点就是 `showHello()` 方法做的事情：调用 `this.$createHello(config, renderFn)` 实现组件的实例化。
 
 ### 如何在普通 js 文件中或者全局调用
 
-一般当你在 Vue 实例中，你可以直接通过 `this.$createHello(config, renderFn)` 调用该组件。而如果在普通 JS 中`this`不是 vue 实例，这时就可以通过组件本身的 `$create` 来进行实例化了，比如：
+一般当你在 Vue 实例中，你可以直接通过 `this.$createHello(config, renderFn)` 调用该组件。而如果在普通 JS 中`this`不是 Vue 实例，这时就可以通过组件本身的 `$create` 来进行实例化了，比如：
 
 ```js
 import Hello from './hello.vue'