`CascadePicker` component is used to implement the cascading change between picker columns. What is the effect of cascade? Considering the usage of province-city-area picker, when the province is changed, you may want the city column to display the exact cities of current province, so does the area column. And the `CascadePicker` is here to help you handle this.
`CascadePicker` component is used to implement the cascading change between picker columns. What is the effect of cascade? Considering the usage of province-city-area picker, when the province is changed, you may want the city column to display the exact cities of current province, so does the area column. And the `CascadePicker` is here to help you handle this.
__Notice:__ Cause this component used create-api, so you should read [create-api](#/en-US/docs/create-api) first.
This module exports a function called `createAPI` with which you can invoke the custom component which has been instantiated in api form.
This module exports a function called `createAPI` with which you can invoke the custom component which has been instantiated in api form.
__Notice:__ All componnets which used `createAPI` must be registered by `Vue.use`.
### createAPI(Vue, Component, [events, single])
### createAPI(Vue, Component, [events, single])
- Parameters:
- Parameters:
...
@@ -17,7 +19,7 @@ This module exports a function called `createAPI` with which you can invoke the
...
@@ -17,7 +19,7 @@ This module exports a function called `createAPI` with which you can invoke the
-`{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).
-`{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.
-`{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.
-`{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.
- 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.
- Example:
- Example:
...
@@ -115,18 +117,14 @@ This module exports a function called `createAPI` with which you can invoke the
...
@@ -115,18 +117,14 @@ This module exports a function called `createAPI` with which you can invoke the
```
```
In this example, we create a component `Hello` which needs to be invoked in api form and we invoke it in another component.The focus is what `showHello()` does: invoking method `this.$createHello(config, renderFn)` to instantiate `Hello`.
In this example, we create a component `Hello` which needs to be invoked in api form and we invoke it in another component.The focus is what `showHello()` does: invoking method `this.$createHello(config, renderFn)` to instantiate `Hello`.
### How to use in general JS files
### 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 call `$createHello` method by `Vue.prototype` or create a vue instance. 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
```js
importVuefrom'vue'
importHellofrom'./hello.vue'
Vue.prototype.$createHello(config,renderFn)
// or
Hello.$create(config,renderFn)
constvm=newVue()
vm.$createHello(config,renderFn)
```
```
There is another idea which used the mode of data-driven. For example, in vuex, you could use a global state to label whether to call the component, and watch this state in App.vue to handle this component.
There is another idea which used the mode of data-driven. For example, in vuex, you could use a global state to label whether to call the component, and watch this state in App.vue to handle this component.
The underlying popup component, mainly used to implement upper component encapsulation based on itself. It only provides basic functions: specifying the type, whether there's a background layer, showing content (HTML) and whether the component is in center position.
The underlying popup component, mainly used to implement upper component encapsulation based on itself. It only provides basic functions: specifying the type, whether there's a background layer, showing content (HTML) and whether the component is in center position.
All of the built-in popup type components are implemented based on this component, including [Toast](#/en-US/docs/toast)、[Picker](#/en-US/docs/picker)、[TimePicker](#/en-US/docs/time-picker)、[Dialog](#/en-US/docs/dialog)、[ActionSheet](#/en-US/docs/action-sheet).
Most of the built-in popup type components are implemented based on this component, including [Toast](#/en-US/docs/toast)、[Picker](#/en-US/docs/picker)、[CascadePicker](#/en-US/docs/cascade-picker)、[DatePicker](#/en-US/docs/date-picker)、[TimePicker](#/en-US/docs/time-picker)、[SegmentPicker](#/en-US/docs/segment-picker)、[Dialog](#/en-US/docs/dialog)、[ActionSheet](#/en-US/docs/action-sheet).
__Notice:__ All the components above used create-api, so you should read [create-api](#/en-US/docs/create-api) first.
__Notice:__ Cause this component depend on Picker component, and Picker used create-api, so you should read [create-api](#/en-US/docs/create-api) first.
