webpackJsonp([45],{457:function(s,t,e){s.exports=e(521)},521:function(s,t,e){var a=e(11)(null,e(522),null,null,null);s.exports=a.exports},522:function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("section",[e("h2",{attrs:{id:"create-apimodule"}},[e("a",{staticClass:"anchor",attrs:{href:"#cube-create-apimodule-anchor","aria-hidden":"true"}},[e("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[e("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" create-api module")]),s._v(" "),s._m(0),s._v(" "),e("h3",{attrs:{id:"createAPI(Vue,Component,[events,single])"}},[e("a",{staticClass:"anchor",attrs:{href:"#cube-createAPI(Vue,Component,[events,single])-anchor","aria-hidden":"true"}},[e("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[e("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" createAPI(Vue, Component, [events, single])")]),s._v(" "),s._m(1)])},staticRenderFns:[function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("p",[s._v("This module exports a function called "),e("code",{pre:!0},[s._v("createAPI")]),s._v(" with which you can invoke the custom component which has been instantiated in api form.")])},function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("ul",[e("li",[e("p",[s._v("Parameters:")]),s._v(" "),e("ul",[e("li",[e("code",{pre:!0},[s._v("{Function} Vue")]),s._v(" Vue function")]),s._v(" "),e("li",[e("code",{pre:!0},[s._v("{Function | Object} Component")]),s._v(" Vue component which must contains "),e("code",{pre:!0},[s._v("name")])]),s._v(" "),e("li",[e("code",{pre:!0},[s._v("{Array} [events]")]),s._v(" the collection of the instantiated Vue Component's event name")]),s._v(" "),e("li",[e("code",{pre:!0},[s._v("{Boolean} [single]")]),s._v(" whether singleton")])])]),s._v(" "),e("li",[e("p",[s._v("Usage:")]),s._v(" "),e("ul",[e("li",[s._v("This method will add a method which is named "),e("code",{pre:!0},[s._v("$create{camelize(Component.name)}")]),s._v(" to Vue's prototype, so you can instantiate the Vue component by "),e("code",{pre:!0},[s._v("const instance = this.$createAaBb(config, [renderFn, single])")]),s._v(" in other components. The instantiated component's template content will be attached to "),e("code",{pre:!0},[s._v("body")]),s._v(" element.The parameters of the "),e("code",{pre:!0},[s._v("$createAaBb")]),s._v("：\n"),e("ul",[e("li",[e("code",{pre:!0},[s._v("{Object} config")]),s._v(" It will be passed to the component as its props except the events in "),e("code",{pre:!0},[s._v("events")]),s._v("(It will transform by default, eg: If "),e("code",{pre:!0},[s._v("events")]),s._v(" has value "),e("code",{pre:!0},[s._v("['click']")]),s._v(", then the prop "),e("code",{pre:!0},[s._v("onClick")]),s._v(" will be treated as component's event and not component's props).")]),s._v(" "),e("li",[e("code",{pre:!0},[s._v("{Function} [renderFn]")]),s._v(" Optional, used to generate the VNode child node in the slot scene in general.")]),s._v(" "),e("li",[e("code",{pre:!0},[s._v("{Boolean} [single]")]),s._v(" Optional, whether the instantiated component is a singleton or not. If two parameters are provided and the "),e("code",{pre:!0},[s._v("renderFn")]),s._v("'s type is not function, then the "),e("code",{pre:!0},[s._v("single")]),s._v(" value is the sencond parameter's value.")])])]),s._v(" "),e("li",[s._v("The return of the method "),e("code",{pre:!0},[s._v("instance")]),s._v(" is a instantiated Vue component，and the "),e("code",{pre:!0},[s._v("remove")]),s._v(" method will be "),e("strong",[s._v("attached")]),s._v(" to this instance.You can invoke the "),e("code",{pre:!0},[s._v("remove")]),s._v(" method to destroy the component and detach the component's content from "),e("code",{pre:!0},[s._v("body")]),s._v(" element.")])])]),s._v(" "),e("li",[e("p",[s._v("Example:")]),s._v(" "),e("p",[s._v("First we create Hello.vue component：")]),s._v(" "),e("pre",{pre:!0},[e("code",{attrs:{"v-pre":"",class:"language-html"}},[e("span",{attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),e("span",{attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),e("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),e("span",{attrs:{class:"hljs-string"}},[s._v('"clickHandler"')]),s._v(">")]),s._v("\n    {{content}}\n    "),e("span",{attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{attrs:{class:"hljs-name"}},[s._v("slot")]),s._v(" "),e("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),e("span",{attrs:{class:"hljs-string"}},[s._v('"other"')]),s._v(">")]),e("span",{attrs:{class:"hljs-tag"}},[s._v("</"),e("span",{attrs:{class:"hljs-name"}},[s._v("slot")]),s._v(">")]),s._v("\n  "),e("span",{attrs:{class:"hljs-tag"}},[s._v("</"),e("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),e("span",{attrs:{class:"hljs-tag"}},[s._v("</"),e("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),e("span",{attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),e("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),e("span",{attrs:{class:"hljs-string"}},[s._v('"text/ecmascript-6"')]),s._v(">")]),e("span",{attrs:{class:"javascript"}},[s._v("\n  "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    "),e("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'hello'")]),s._v(",\n    "),e("span",{attrs:{class:"hljs-attr"}},[s._v("props")]),s._v(": {\n      "),e("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": {\n        "),e("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),e("span",{attrs:{class:"hljs-built_in"}},[s._v("String")]),s._v(",\n        "),e("span",{attrs:{class:"hljs-attr"}},[s._v("default")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'Hello'")]),s._v("\n      }\n    },\n    "),e("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      clickHandler(e) {\n        "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$emit("),e("span",{attrs:{class:"hljs-string"}},[s._v("'click'")]),s._v(", e)\n      }\n    }\n  }\n")]),e("span",{attrs:{class:"hljs-tag"}},[s._v("</"),e("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])]),s._v(" "),e("p",[s._v("Then we make Hello.vue to an API style component by calling the "),e("code",{pre:!0},[s._v("createAPI")]),s._v(" method.")]),s._v(" "),e("pre",{pre:!0},[e("code",{attrs:{"v-pre":"",class:"language-js"}},[s._v("  "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),e("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n  "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Hello "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),e("span",{attrs:{class:"hljs-string"}},[s._v("'./Hello.vue'")]),s._v("\n\n  "),e("span",{attrs:{class:"hljs-comment"}},[s._v("// import Style to load the base style")]),s._v("\n  "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" {\n    "),e("span",{attrs:{class:"hljs-comment"}},[s._v("/* eslint-disable no-unused-vars */")]),s._v("\n    Style,\n    Dialog,\n    createAPI\n  } "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),e("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui'")]),s._v("\n\n  Vue.use(Dialog)\n\n  "),e("span",{attrs:{class:"hljs-comment"}},[s._v("// create this.$createHello API")]),s._v("\n  createAPI(Vue, Hello, ["),e("span",{attrs:{class:"hljs-string"}},[s._v("'click'")]),s._v("], "),e("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(")\n\n  "),e("span",{attrs:{class:"hljs-comment"}},[s._v("// init Vue")]),s._v("\n  "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Vue({\n    "),e("span",{attrs:{class:"hljs-attr"}},[s._v("el")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'#app'")]),s._v(",\n    "),e("span",{attrs:{class:"hljs-attr"}},[s._v("render")]),s._v(": "),e("span",{attrs:{class:"hljs-function"}},[e("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v(" ("),e("span",{attrs:{class:"hljs-params"}},[s._v("h")]),s._v(") ")]),s._v("{\n      "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" h("),e("span",{attrs:{class:"hljs-string"}},[s._v("'button'")]),s._v(", {\n        "),e("span",{attrs:{class:"hljs-attr"}},[s._v("on")]),s._v(": {\n          "),e("span",{attrs:{class:"hljs-attr"}},[s._v("click")]),s._v(": "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".showHello\n        }\n      }, ["),e("span",{attrs:{class:"hljs-string"}},[s._v("'Show Hello'")]),s._v("])\n    },\n    "),e("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      showHello() {\n        "),e("span",{attrs:{class:"hljs-comment"}},[s._v("/* 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) */")]),s._v("\n        "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" instance = "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createHello({\n          "),e("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'My Hello Content'")]),s._v(",\n          onClick(e) {\n            "),e("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),e("span",{attrs:{class:"hljs-string"}},[s._v("'Hello component clicked.'")]),s._v(")\n          }\n        }, "),e("span",{attrs:{class:"hljs-comment"}},[s._v("/* renderFn */")]),s._v(" (createElement) => {\n          "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" [\n            createElement("),e("span",{attrs:{class:"hljs-string"}},[s._v("'p'")]),s._v(", {\n              "),e("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'other'")]),s._v("\n            }, "),e("span",{attrs:{class:"hljs-string"}},[s._v("'other content'")]),s._v(")\n          ]\n        })\n        "),e("span",{attrs:{class:"hljs-comment"}},[s._v("// Also, the event hanlder can be registered by instance's `$on` method")]),s._v("\n        instance.$on("),e("span",{attrs:{class:"hljs-string"}},[s._v("'click'")]),s._v(", (e) => {\n          "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" $dialog = "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createDialog({\n            "),e("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'confirm'")]),s._v(",\n            "),e("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'click confirm to remove current instance'")]),s._v(",\n            "),e("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-alert'")]),s._v("\n          })\n          $dialog.show()\n\n          $dialog.$on("),e("span",{attrs:{class:"hljs-string"}},[s._v("'confirm'")]),s._v(", () => {\n            "),e("span",{attrs:{class:"hljs-comment"}},[s._v("// remove instance")]),s._v("\n            instance.remove()\n          }).$on("),e("span",{attrs:{class:"hljs-string"}},[s._v("'cancel'")]),s._v(", () => {\n            "),e("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),e("span",{attrs:{class:"hljs-string"}},[s._v("'cancel'")]),s._v(")\n          })\n        })\n      }\n    }\n  })\n")])]),s._v(" "),e("p",[s._v("In this example, we create a component "),e("code",{pre:!0},[s._v("Hello")]),s._v(" which needs to be invoked in api form and we invoke it in another component.The focus is what "),e("code",{pre:!0},[s._v("showHello()")]),s._v(" does: invoking method "),e("code",{pre:!0},[s._v("this.$createHello(config, renderFn)")]),s._v(" to instantiate "),e("code",{pre:!0},[s._v("Hello")]),s._v(".")])])])}]}}});