@@ -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.
| 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.
`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: