/* The first parameter of `$createHello` 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) */
The first parameter of `$createHello` 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)
*/
constinstance=this.$createHello({
constinstance=this.$createHello({
content:'My Hello Content',
content:'My Hello Content',
onClick(e){
onClick(e){
...
@@ -66,13 +94,22 @@ This module exports a function called `createAPI` with which you can invoke the
...
@@ -66,13 +94,22 @@ This module exports a function called `createAPI` with which you can invoke the
})
})
// Also, the event hanlder can be registered by instance's `$on` method
// Also, the event hanlder can be registered by instance's `$on` method
instance.$on('click',(e)=>{
instance.$on('click',(e)=>{
console.log('on click',e)
const$dialog=this.$createDialog({
type:'confirm',
content:'click confirm to remove current instance',
icon:'cubeic-alert'
})
$dialog.show()
$dialog.$on('confirm',()=>{
// remove instance
instance.remove()
}).$on('cancel',()=>{
console.log('cancel')
})
})
})
// destroy the component and detach the component's content from `body` element
instance.remove()
}
}
}
}
})
})
```
```
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 `MyComponent` with its name option `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 `MyComponent`.